如何创建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/