我试图得到这个形状：
到目前为止我有this.有没有办法使用CSS获得此效果？我认为负半径可能会起作用.
div {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
border-radius:10% / 70%;
background-color: red;
}
<div>
Board
</div>
解决方法
我喜欢这样的东西,因为我总是乱搞这样的东西.所以我会这样做.使用：before和：在我们可以创建这个形状之后,我们使用它们创建一个坐在div顶部的形状,颜色与背景相同.这将使它看起来像你想要的形状.
制作：之前和之后：大小之后得到你想要的尺寸(改变宽度和高度).
div {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
border-radius: 20px;
background-color: red;
position: relative;
}
div:before,div:after {
content: "";
display: block;
width: 96%;
height: 20px;
border-radius: 50%;
background: #fff;
position: absolute;
margin: auto;
}
div:before {
top: -17px;
left: 0;
right: 0;
}
div:after {
bottom: -17px;
left: 0;
right: 0;
}
<div>Board</div>
