如何在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; } 更多推荐
发布评论