CSS3更改div風格

Question

我已搜索了一個多小時，現在之後。我試圖找出如何設計div的外觀。

http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png

圖片顯示黑色DIV與左側一個「箭頭」的一面。你如何做這些事情？

Answer 1

這裏是一個快速完成這個任務的方法。

jsfiddle demo

CSS

#frame{ 
    width:90%; 
    border: 20px solid lightblue; 
    background:black; 
} 
.title{ 
    font-size:3em; 
    position:absolute; 
    color:white; 
    top: 60px; 
    margin-left:80px; 
} 
.arrow-right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 

    border-left: 60px solid lightblue; 
} 

HTML

<div id="frame"> 
<div class="arrow-right"></div> 
<div class="title">Some text here!</div> 
</div> 

Answer 2

我會用一個反向箭頭來實現這一（使用頂部和底部邊框邊框黑客）。您也可以將它作爲僞元素的一部分，以便您的標記保持乾淨。

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200); 
 
body { 
 
    background: #BCDEB1; 
 
} 
 
h1 { 
 
    font-family: 'Yanone Kaffeesatz'; 
 
    float:right; 
 
    background: black; 
 
    position: relative; 
 
    color: white; 
 
    padding: 0.5em 0.5em; 
 
    line-height: 1em; 
 

 
    margin-right: 0.1em; 
 
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2); 
 
} 
 

 
h1:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 0; 
 
    border: 0 solid black; 
 
    border-left: 0.5em solid transparent; 
 
    border-top-width: 1em; 
 
    border-bottom-width: 1em; /* 1 + 1 = 2. The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */ 
 
    
 
    box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2); 
 
}

<h1>Administration and etc?</h1>

Answer 3

由於三角形是成角度的，它可能是值得研究的SVG作爲:before僞元件的content。

這是一個codepen，我差不多完成了使用CSS。 http://codepen.io/anon/pen/dPVERJ

您可能需要稍微調整一下以使其看起來完全像圖像。 我用cssarrowplease來生成基本箭頭並從那裏調整它。

另見http://css-tricks.com/snippets/css/css-triangle/

我想谷歌這樣的詢問這裏之前，這是一個已經過想通了很多次的問題。