如何在CSS中创建3d功能区框(How to create 3d ribbon box in css)

如何在CSS中创建3d功能区框(How to create 3d ribbon box in css)

我试图在CSS3中制作3d功能区但是遇到一些问题，所以我怎样才能用最少的代码用纯CSS制作它。

这是我想要制作的图像......

谢谢

I am trying to make the 3d ribbon box in CSS3 but getting some problems so how can i make this with pure CSS with minimum code.

Here is the image what i am trying to making.....

Thanks

最满意答案

这是一种方法，非常小的标记。 :before和:after伪元素需要IE 8+，如果你需要支持更低（IE6 / 7），你可以为三角形角使用两个额外的<div>元素。

示例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; } ​

Here's one way to do it, pretty minimal markup. :before and :after pseudo-elements require IE 8+, if you need to support lower (IE6/7) you could use two extra <div> elements for the triangle corners.

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; } ​