如何創建CSS

Question

我試圖讓3D色帶盒CSS3，但得到的一些問題，使3D色帶盒我怎樣才能讓這個純CSS 用最少的代碼。

這裏是我試圖使圖像.....

感謝

Answer 1

這裏有一個辦法做到這一點，相當小的標記。 :before和:after僞元素需要IE 8+，如果你需要支持較低的（IE6/7），你可以使用兩個額外的<div>元素爲三角形的角落。

example jsfiddle

HTML：

<div id="box"> 
    <div id="ribbon">3d Text and rounded corner sample</div> 
</div>​ 

CSS：

#box { 
    position:relative; 
    background:gray; 
    width:400px; 
    height:300px; 
    margin:20px 45px; 
} 
#ribbon { 
    position:absolute; 
    top:15px; 
    left:-20px; 
    width:360px; 
    height:55px; 
    background:#ff2702; 
    color:white; 
    padding:20px 40px; 
    font-size:24px; 
    font-weight:bold; 
    border-radius:5px 5px 0 0; 
    box-shadow:0 0 8px #333; 
    text-shadow:0 0 8px #000; 
} 
#ribbon:before { 
    content:''; 
    position:absolute; 
    bottom:-20px; 
    left:0; 
    border-top:solid 10px #ff2702; 
    border-right:solid 10px #ff2702; 
    border-bottom:solid 10px transparent; 
    border-left:solid 10px transparent; 
} 
#ribbon:after { 
    content:''; 
    position:absolute; 
    bottom:-20px; 
    right:0; 
    border-top:solid 10px #ff2702; 
    border-right:solid 10px transparent; 
    border-bottom:solid 10px transparent; 
    border-left:solid 10px #ff2702; 
} 
​ 

Answer 2

我發現這個鏈接，CSS3絲帶，或許對您有用。 http://cssarrowplease.com http://www.sitepoint.com/pure-css3-ribbons/