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

【问题标题】：Is it possible to create rectangle with its left and right sides are absolute circle by using CSS?是否可以使用CSS创建左右两侧都是绝对圆形的矩形？
【发布时间】：2018-06-12 06:00:03
【问题描述】：

我正在尝试创建的内容显示在图像中

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

.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> 标签。

【问题讨论】：

Capsule shape using border-radius without a set width or height?的可能重复

标签： html css

【解决方案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>

【讨论】：

您可以将其表示为border-radius: calc(100px * 0.65 * 0.5);，而不是自己进行计算。
好电话，这是另一种选择。

【解决方案2】：

你可以像这样使用伪元素：

.button-holder {
  width: 300px;
  height: 100px;
  background-color: #063755;
  position: relative;
  margin: 0 auto;
}

.button-holder:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33%; /* height/width */
  top: 0;
  left: -16.665%; /* 1/2 of the width */
  border-radius: 100%;
  background-color: #063755;
}

.button-holder:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33%;
  top: 0;
  right: -16.665%;
  border-radius: 100%;
  background-color: #063755;
}

<div class="button-holder">

</div>

【讨论】：

【解决方案3】：

试试这个：

<html>

<head>
  <style>
    #corner {
      border-radius: 100px 100px 100px 100px;
      background: #73AD21;
      padding: 20px;
      width: 400px;
      height: 150px;
    }
  </style>
</head>

<body>
  <p id="corner"></p>
</body>

</html>

output

【讨论】：