html - 是否可以使用CSS创建左右两侧都是绝对圆形的矩形？

Question

此处我要创建的内容显示在图像中

我用过border-radius，但对我没有帮助。到目前为止我所做的在下面的片段中给出：

.button-holder{
    width:300px;
    height:100px;
}
.button{
    width:80%;
    height:65%;
    border-radius:50%;
    border:2px solid #000;
    background-color:#063755;
}

<div class="button-holder">
   <div class="button"></div>
</div>

请注意：- 我知道可以通过合并多个<div>标签来获得形状，但这对我没有帮助。我正在寻找带有单个<div>标签的答案。

标签： htmlcss

Answer 1

您需要使用 中的一半高度px，而不是%.

.button-holder{
    width:300px;
    height:100px;
}
.button{
    width:80%;
    height:65%;
    border-radius:32.5px;  // 100px * 0.65 * 0.5 = 32.5px
    border:2px solid #000;
    background-color:#063755;
}

<div class="button-holder">
   <div class="button"></div>
</div>