如何使边框外圆半径曲线?
底边的边界半径要向外弯曲。如何用CSS3做?
ttcibm8c1#
是的,你可以做到这一点,没有任何额外的加价。这样写:
.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; }
<div class="active">hi</div>
检查此http://jsfiddle.net/p6sGJ/
1条答案
按热度按时间ttcibm8c1#
是的,你可以做到这一点,没有任何额外的加价。这样写:
检查此http://jsfiddle.net/p6sGJ/