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

Question

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

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

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加使用边框半径的其他答案，这里使用SVG的另一种选择 :)。 更少的代码行：

  

您可以根据标准设置宽度和高度。这只是一个演示，以显示使用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 。< / p>

  

注意 - 如果您不使用viewbox，默认情况下需要使用x和y   坐标为0,0（表示原点/左上角）   容器）因此，它将显示与第一季度相同的输出   下方。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

也许是这样的？

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

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

＆＃13;

＆＃13;

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

＆＃13;

<div>
Text
</div>

＆＃13;

＆＃13;

＆＃13;