如何在CSS中创建3d功能区框

Question

我正在尝试在 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 Ribbons，可能对您有用。 http://cssarrowplease.com http://www.sitepoint.com/pure-css3-ribbons/