html - 你如何在CSS中制作一个形状像四分之一椭圆的div？

Question

那么，如何在 CSS3 中制作形状像椭圆左下四分之一的 div？

CSS3 支持圆 Angular ，但没有明显的方法可以使 div 形状像四分之一椭圆。

div 的高度应该是 50px，宽度应该是屏幕的 25%。

Answer 1

首先，您所描述的形状可能并不总是椭圆形。根据屏幕尺寸，25% 的宽度可能会形成一个圆圈。

也就是说，这是一个简单的四分之一椭圆，只有几行 CSS。重要的 CSS 属性是 border-bottom-left-radius: 100%。

div {
  height: 50px;
  width: 25%;
  background-color: red;
  border-bottom-left-radius: 100%;
}

<div></div>