使用css锐利边缘到圆形边框？

Question

我正在尝试创建一个带圆角边框的div元素.我知道使用了border-radius,但我注意到使用这个属性只会弯曲角落,如右上角,左上角等等所以我想知道是否有一些属性可以弯曲div元素的一面,像border-radius上,下,左,右的东西.

例如,div具有直的顶部,底部和左侧但是圆形的右侧.我想创建右侧,使其在顶部比底部更圆.

我的目标是创建一个右侧为圆形的div元素,不会影响顶部和底部.我的意思是右侧的曲线一到达顶部或底部就会停止.(使顶部和底部保持笔直而不是略微弯曲).

有没有办法使用CSS获得此效果？

Answer 1

您可以通过斜杠符号指定水平和垂直border-radii来实现这样的效果......

div{
    width:100px;height:100px;
    border:3px solid #bada55;
    border-radius:10px/50%;
}

<div></div>

这将为所有边设置垂直边界半径为50%,水平边界半径为10px.您可以单独为每个角定义此值(因此您最多有八个值).