如何使边界半径曲线在外面?
边界半径的底边想要在外面弯曲.如何用CSS3做到这一点?
解决方法
是的,你可以做到这一点,没有任何额外的标记.像这样写:
CSS
.active{ border:1px solid red; border-bottom:0; width:80px; height:40px; margin:30px; position:relative; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius: 5px 5px 0 0; } .active:after,.active:before{ content:''; width:40px; height:30px; border:1px solid red; position:absolute; bottom:-3px; border-top:0; } .active:after{ border-left:0; -moz-border-radius:0 0 5px 0; -webkit-border-radius:0 0 5px 0; border-radius: 0 0 5px 0; left:-41px; } .active:before{ border-right:0; -moz-border-radius:0 0 0 5px; -webkit-border-radius:0 0 0 5px; border-radius: 0 0 0 5px; right:-41px; }
HTML
<div class="active">hi</div>