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

Question

好了，所以我期待实现如下所示：

我已经尝试了伪元素的边界半径，但曲线是丑陋和顺利，而不是如果你知道我的意思，那么会突然以尖角结尾。

相同的div需要在底部有相同的曲线，但在图像中需要相反的版本。 此外，考虑到一个图像：

我怎么会在CSS中实现这个？

Answer 1

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

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

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

Answer 2

你可以不喜欢这样。我用div中的黑色背景使其更加清晰。您可以按照您的要求去除黑色。

.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; 
 
}

<div class="figure"> 
 
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/14/Quaidportrait.jpg/220px-Quaidportrait.jpg" /> 
 
</div>

您可以检查在这里工作CodePen。 https://codepen.io/sajiddesigner/pen/BZOwWa