曲线在div或elemet的顶部/底部

Question

好的，所以我希望实现如下所示：

我在伪元素上尝试过border-radius，但曲线是丑陋而平滑的，而不是突然结束＆＃39;尖角 - 如果你知道我的意思。

同一个div在底部需要相同的曲线，但在图像中需要相同的曲线。 另外，考虑一下图像：

我如何在CSS中实现这一目标？

Answer 1

您可以使用slash syntax将border-radius用于垂直半径和水平半径的不同值：

＆＃13;

＆＃13;

.picture {
  border-radius: 50%/10%;
}

＆＃13;

<img class="picture" src="https://static-s.aa-cdn.net/img/ios/608437635/d606ff565c22f64d84e4c2195981c386?v=1">

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做。我在div中使用了黑色背景来使它更清晰。您可以根据自己的要求删除黑色。

＆＃13;

＆＃13;

@click.right

＆＃13;

.figure {
  width: 200px;
  background-color: black;
  overflow:hidden;
}
img{
  width:100%;
  border-bottom-left-radius: 100%30px;
  border-bottom-right-radius: 100%30px; 
  border-top-left-radius: 100%30px;
  border-top-right-radius: 100%30px; 
}

＆＃13;

＆＃13;

＆＃13;

您可以在此处查看CodePen的工作原理。 https://codepen.io/sajiddesigner/pen/BZOwWa