这是我在说什么的形象:
有没有办法得到这样的角落使用css3或者我必须诉诸图像?我相信我在这个地方看到一个教程,但我似乎找不到。
解决方法
你的意思是像
this demo fiddle?
HTML:
<div class="Box"> <div class="head"> <div class="like"></div> <h3>User927</h3> </div> <div class="cont"> <p>Lorem ipsum...</p> </div> <div class="foot"> <a href="">More</a> </div> </div>
CSS:
.Box { width: 310px; position: relative; } .head { background: black; color: white; } .cont { border-left: 1px solid silver; border-right: 1px solid silver; } .foot { background: lightgray; border: 1px solid silver; border-bottom-width: 3px; } .head:before,.head:after,.foot:before,.foot:after { font-size: 0px; content: "."; position: absolute; } .head:before { border-top: 5px solid white; border-right: 5px solid black; left: 0; top: 0; } .head:after { border-top: 5px solid white; border-left: 5px solid black; right: 0; top: 0; } .foot:before { border-bottom: 7px solid white; border-right: 7px solid transparent; left: 0; bottom: 0; } .foot:after { border-bottom: 7px solid white; border-left: 7px solid transparent; right: 0; bottom: 0; }
缺点:对于IE7,您需要在标记中添加额外的span,因为:after和:在不支持说明符之前,请参阅this revised fiddle。