<div class=”boxcontent”>
<h1>略带菱形的css圆角矩形</h1>
</div>
<b class=”b4″></b><b class=”b3″></b><b class=”b2″></b><b class=”b1″></b>
</div>
特殊CSS圆角:
.pillar {background:transparent;width:40%;}.pillar h1, .pillar p {margin:0 10px;}.pillar h1 {font-size:2em;color:#fff;}.pillar p {padding-bottom:0.5em;}.pillar .b1E, .pillar .b2E, .pillar .b3E, .pillar .b4E {display:block;overflow:hidden;font-size:1px;}.pillar .b1E, .pillar .b2E, .pillar .b4E {height:1px;}.pillar .b2E, .pillar .b3E {background:#d66;border-left:1px solid #fff;border-right:1px solid #fff;}.pillar .b4E {background:#d66;border-left:4px solid #fff;border-right:4px solid #fff;}.pillar .b1E {margin:0 2px;background:#fff;}.pillar .b2E {margin:0 1px;border-width:0 1px;}.pillar .b3E {height:2px;margin:0;}.pillar .b4E {margin:0 2px;}.pillar .boxcontent {display:block;background:#d66;border-left:1px solid #fff;border-right:1px solid #fff;margin:0 5px;}
特殊css圆角矩形
CODE:
复制代码
<style type=”text/css”>
.pillar {}{
background:transparent;
width:40%;
}
.pillar h1, .pillar p {}{
margin:0 10px;
}
.pillar h1 {}{
font-size:2em;
color:#fff;
}
.pillar p {}{
padding-bottom:0.5em;
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {}{
display:block;
overflow:hidden;
font-size:1px;
}
.pillar .b1, .pillar .b2, .pillar .b4 {}{
height:1px;
}
.pillar .b2, .pillar .b3 {}{
background:#d66;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.pillar .b4 {}{
background:#d66;
border-left:4px solid #fff;
border-right:4px solid #fff;
}
.pillar .b1 {}{
margin:0 2px;
background:#fff;
}
.pillar .b2 {}{
margin:0 1px;
border-width:0 1px;
}
.pillar .b3 {}{
height:2px;
margin:0;
}
.pillar .b4 {}{
margin:0 2px;
}
.pillar .boxcontent {}{
display:block;
background:#d66;
border-left:1px solid #fff;
border-right:1px solid #fff;
margin:0 5px;
}
</style>
<div class=”pillar”>
<b class=”b1″></b><b class=”b2″></b><b class=”b3″></b><b class=”b2″></b><b class=”b4″></b>
<div class=”boxcontent”>










