html - 带尖 Angular 的圆边

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

如果您知道形状的大小，可以使用包装器 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>