CSS 高级椭圆形

【问题标题】：CSS advanced oval shapeCSS 高级椭圆形
【发布时间】：2018-05-08 04:31:35
【问题描述】：

我在 css 中创建此形状时遇到问题：

我试过后&底部有歪斜，但不能使它变成椭圆形，下面有内容。

【问题讨论】：

请将您的代码作为 sn-p 包含在内。让人们可以轻松地帮助您。
您可以使用 :after 、border-radius 和 overflow 。在 after 更宽且更容易塑造隐藏侧边缘的情况下，线性和径向渐变的混合也可以做到，否则 SVG 将做得很好。
最后是箭头吗？

标签： css sass

【解决方案1】：

使用边框半径设置。希望这会有所帮助。

.oval {
width: 100px;
height: 150px;
background-color: lightblue;
border-bottom-right-radius: 70px 25px;
border-bottom-left-radius: 70px 25px;
}

&lt;div class="oval"&gt;&lt;/div&gt;

【讨论】：