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

So, how do you make a div that's shaped like the bottom-left quarter of an ellipse in CSS3?

那么,你如何在CSS3中创建一个形状像椭圆左下角的div呢?

CSS3 supports rounded corners, but there is no obvious way to make a div shaped like a quarter of an ellipse.

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

The height of the div is supposed to be 50px, and the width is supposed to be 25% of the screen.

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

5 个解决方案

#1

To start, the shape you're describing might not always be an ellipse. Depending on the screen size, the 25% width might result in a circle.

首先,您描述的形状可能并不总是椭圆形。根据屏幕尺寸的不同,25%宽度可能会产生圆圈。

That said, here's a simple quarter-ellipse with just a few lines of CSS. The important CSS property being the border-bottom-left-radius: 100%.

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

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

<div></div>

#2

Maybe simply using border-radius like this :

也许只是像这样使用border-radius:

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

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

Here is another fancy way using radial-gradient and the ellipse value:

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

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

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

#3

Adding to the other answers who use border radius, here's another alternative using SVG :). Fewer lines of code:

添加到使用边界半径的其他答案,这是使用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.

您可以根据标准设置宽度和高度。这只是一个演示,以显示使用SVG实现省略号的更简单方法。

There's a predefined ellipse container, you just need to adjust the width and height of the svg container to clip off and make only 1/4th visible.

有一个预定义的椭圆容器,你只需要调整svg容器的宽度和高度来剪裁,只有1/4可见。

Here's a demonstration of what the coordinates imply:

这是对坐标意味着什么的演示:

You can also make use of viewbox to extract the particular part of the ellipse within the svg:

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

The prototype of the viewbox attribute is :

viewbox属性的原型是:

viewBox="x y width height"

where x and y are the coordinates of our SVG container as shown in the diagram below from where we need to start, taking the width and height to the right and bottom.

其中x和y是我们SVG容器的坐标,如下图所示,我们需要从哪里开始,将宽度和高度放在右边和底部。

width and height are 100 and 50 since that's the quarter of our ellipse having diameters 200 and 100.

宽度和高度分别为100和50,因为这是我们的椭圆直径为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.

注意 - 如果不使用视图框,默认情况下它将x和y坐标视为0,0(表示容器的原点/左上角),因此,它将显示与下面第一个四分之一相同的输出。

<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>

#4

Maybe like this?

也许是这样的?

#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>

#5

If you just want corners with unequal rounding you can actually do this.

如果你只是想要角度不等的圆角,你实际上可以做到这一点。

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>

#1