带有尖角的圆边

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

如果知道所需形状的大小，则可以使用wrapper 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>