圆角两侧有尖角

Question

我想用CSS实现元素的这些方面：

这是我最接近的（需要边框）：

div { 
  width: 120px;
  height: 100px;
  margin: 25px auto;
  border: 1px solid #000;
  border-top-left-radius: 200px 300%;
  border-bottom-left-radius: 200px 300%;
  border-top-right-radius: 200px 300%;
  border-bottom-right-radius: 200px 300%;
}

<div></div>

有关如何锐化边缘的任何建议？宽度需要是可变的。

Answer 1

你可以使用伪元素这样做，它会扩展到你在主元素上设置的大小

更新

typ2在左/右曲线边界上具有相等的半径，如果您想用颜色，图像或动态可伸缩高度填充这些半径，则需要额外的内部元素。

.typ1 div {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 100px;
  margin: 0 30px;
  overflow: hidden;
}

.typ1 div + div { 
  width: 200px;
  height: 100px;
}

.typ1 div::before,
.typ1 div::after { 
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  border-radius: 100%;
  border: 1px solid #000;
}
.typ1 div::after { 
  left: 22%;
  top: 0;
  width: 56%;
  height: 100%;
  border-radius: 0;
  border-width: 1px 0;
}

.typ2 div { 
  position: relative;
  display: inline-block;
  width: 74px;
  height: 100px;
  margin: 5px 52px;
  border: 1px solid #000;
  border-width: 1px 0;
}

.typ2 div + div { 
  width: 156px;
}

.typ2 div::before,
.typ2 div::after { 
  left: -24px;
  top: -25%;
  width: 188px;
  height: 150%;
  border-radius: 100%;
  border: 1px solid transparent;
  border-left: 1px solid #000;
}
.typ2 div::after { 
  left: auto;
  right: -24px;
  border-left: none;
  border-right: 1px solid #000;
}

/* general styling */
div::before, div::after { 
  content: '';
  position: absolute;
  box-sizing: border-box;
}

<div class="typ1">
  <div></div>
  <div></div>
</div>

<div class="typ2">
  <div></div>
  <div></div>
</div>

Answer 2

如果你知道你想要形状的大小，你可以使用包装div和overflow：hidden来解决这个问题。

我使用flexbox将其居中，但您可以使用其他方式将其垂直居中。

.wrapper {
  display: flex;
  align-items: center;
  height: 100px;
  overflow: hidden;
}

.circle { 
  width: 120px;
  height: 120px;
  margin: 25px auto;
  background-color: black;
  border-radius: 100%;
}

<div class="wrapper">
   <div class="circle"></div>
</div>

Answer 3

您可以使用:before和:after伪元素来完成：

.circle { 
  position: relative;
  width: 100px;
  height: 100px;
  margin: 25px auto;
  border-radius: 50%;
  background: #000;
}

.circle:before,
.circle:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 25px;
  background: #fff;
}

.circle:before {
  top: -16px;
}

.circle:after {
  bottom: -16px;
}

<div class="circle"></div>

根据需要调整top和bottom属性的值。