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

Question

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

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

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

Answer 1

大概是这样的？

#ellipse {
  background: red;
  width: 200px;
  height: 50px;
  border-radius: 50%;
  position: relative;
}

#ellipse:before {
  width: 50%;
  left: 50%;
  height: 100%;
  position: absolute;
  background: white;
  display: block;
  content: '';
}

#ellipse:after {
  width: 100%;
  top: 50%;
  height: 50%;
  position: absolute;
  background: white;
  display: block;
  content: '';
}

<div id="ellipse"></div>

Answer 2

也许像这样简单地使用 border-radius :

.box {
  height: 50px;
  width: 25%;
  background: blue;
  border-radius: 0 0 0 100%;
}

<div class="box">
</div>

这是另一种使用径向渐变和椭圆值的奇特方法：

.box {
  height: 50px;
  width: 25%;
  background-image: radial-gradient(ellipse at top right, red 68%, transparent 70%);
}

<div class="box">
</div>

Answer 3

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

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

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

<div></div>

Answer 4

除了使用边框半径的其他答案之外，这里还有 另一个使用 SVG 的替代方法:)。 更少的代码行：

You can set the width and height according to your criteria. This is just a demonstration to show easier way to achieve ellipses using SVG.

有一个预定义的椭圆容器，你只需要adjust the width and height of the svg container剪掉，只使1/4可见 .

下面是坐标含义的演示：

您还可以使用 viewbox 来 提取 svg 中椭圆 的特定部分：

viewbox属性的原型为：

viewBox="x y width height"

其中 x 和 y 是 coordinates of our SVG container，如下图所示 从我们需要开始的地方，采取右边和底部的宽度和高度。

宽度和高度 是 100 和 50 因为那是 quarter of our ellipse 具有直径 200 和 100 .

Note- If you don't use viewbox, by default it takes the x and y coordinates as 0,0 (meaning the origin/ top left corner of the container) so, it will show the output same as the first quarter below.

<br>Top left quarter: origin(0,0(top left)) :<br>
<svg height="50" width="100" viewBox="0 0 100 50">
  <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>

<br>Bottom right quarter: origin(100,50(Center)) :<br>
<svg height="50" width="100" viewBox="100 50 100 50">
  <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>

<br>Bottom left quarter: origin(0,50(Left edge Center)) :<br>
<svg height="50" width="100" viewBox="0 50 100 50">
  <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>


<br>Top right quarter: origin(100,0(Upper edge Center)) :<br>
<svg height="50" width="100" viewBox="100 0 100 50">
  <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:yellow;" />
</svg>

Answer 5

如果你只是想要不等圆的角，你实际上可以这样做。

div {
    background-color: #E0EAF1;
    /* percentages allowed as well */
    border-radius: 50px 0 0 0 / 20px 0 0 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
}

<div>
Text
</div>

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

How do you make a div shaped like a quarter of an ellipse in CSS?

html

css

css-shapes