边界半径CSS属性曲线外 [英] Border-radius CSS property curve outside

问题描述

如何使边界半径曲线位于外部?

How to make the border radius curve outside ?

边框半径的底侧要向外弯曲.如何使用CSS3做到这一点?

The bottom side the border radius want to curve outside. How to do it with CSS3 ?

推荐答案

是的，您可以执行此操作而无需任何额外的标记.这样写:

Yes you can do this without any extra mark up. Write like this:

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>

选中此 http://jsfiddle.net/p6sGJ/

这篇关于边界半径CSS属性曲线外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！