有谁知道如何制作像下面这样的前卫角落?看看边缘如何环绕角落。我也想知道这个词(如果有的话)。跨浏览器支持(IE8 及更高版本,额外的 IE7)是必须的。谢谢你的帮助。
问问题
693 次
3 回答
3
看看这个教程。我不知道它的跨浏览器兼容性如何(因为它是 CSS3),但它达到了你想要的效果。
HTML:
<div>
<h2></h2>
</div>
CSS:
div {
width: 200px;
padding: 50px;
margin: 0 auto;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
height: 50px;
margin: 30px 10px 10px -70px;
background-color: orange;
}
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
于 2013-02-18T01:04:47.377 回答
0
.box{
background: #666;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
width: 200px;
height: 200px;
margin: 40px auto;
position: relative;
}
.ribbon{
background: #FFA500;
position: absolute;
width: 100%;
top: 20px;
left: -20px;
height: 20px;
padding-right: 20px;
}
.ribbon::before{
content: '';
position: absolute;
left: 0px;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 16px 10px 0;
border-color: transparent #FFA500 transparent transparent;
z-index: -5;
}
HTML:
<div class="box">
<div class="ribbon"></div>
</div>
(演示)
我不认为 IE 7/8 支持::before
伪元素,所以如果你想要 IE 兼容性添加另一个元素并::before
在其上放置样式:)
于 2013-02-18T01:06:20.353 回答
0
这edgy corner
实际上只是一个div
与一个triangle
,你只需要一个元素来做到这一点。
<div id="myCorner"></div>
myCorner将是 div,而myCorner:after将是三角形。
看看:http: //jsfiddle.net/Starx/Xp6E7/2/
#myCorner
{
width:100px;
height:70px;
background-color:orange;
-webkit-box-shadow: 0 4px 5px -3px black;
-moz-box-shadow: 0 4px 5px -3px black;
box-shadow: 0 4px 5px -3px black;
position:relative;
}
#myCorner:after
{
content:"";
position:absolute;
left: 0;
top:100%;
width: 0px;
height: 0px;
border-style:solid;
border-width: 5px 10px;
border-color: orange orange transparent transparent;
z-index: -1;
}
于 2013-02-18T01:22:59.023 回答