Html 带 CSS 的半椭圆形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17595147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semi-oval with CSS
提问by Nick Bull
I'm trying to create a mix between an oval and a semi-circle.
我正在尝试在椭圆形和半圆形之间进行混合。
Semi-circles can be created as such in CSS:
可以在 CSS 中创建半圆：
.halfCircle{
height:45px;
width:90px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:green;
}
And ovals can be made like this:
椭圆可以这样制作：
.oval {
background-color: #80C5A0;
width: 400px;
height: 200px;
margin: 100px auto 0px;
border-radius: 200px / 100px;
}
But how can I make a semi-oval? Here's my attempt so far. The problem that happens is I've got flat tops, found here. Thanks!
但是我怎样才能制作一个半椭圆形呢？到目前为止，这是我的尝试。发生的问题是我有平顶，在这里找到。谢谢！
回答by André Dion
I've updated your demo with one possible solution:
我已经用一种可能的解决方案更新了您的演示：
div {
background-color: #80C5A0;
width: 400px;
height: 100px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}<div></div>By using percentage based units for the border-radiusit should always keep a smooth semi-ellipse regardless of your widthand heightvalues.
通过使用基于百分比的单位，border-radius无论您的width和height值如何，它都应始终保持平滑的半椭圆。
With a few minor changes, here's how you'd render the semi-ellipse split in half vertically:
通过一些小的更改，以下是您将半椭圆垂直分成两半的方式：
div {
background-color: #80C5A0;
width: 400px;
height: 100px;
border-radius: 100% / 50%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}<div></div>回答by yunzen
.halfOval {
background-color: #a0C580;
width: 400px;
height: 100px;
margin: 100px auto 0px;
/* top-right top-left bottom-left bottom-right */
/* or from 10.30 clockwise */
border-radius: 50% 50% 0 0/ 100% 100% 0 0;
}
回答by Mohammad Usman
We can use css3 radial-gradient()as well to draw this shape:
我们也可以使用 css3radial-gradient()来绘制这个形状：
.halfOval {
background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
}
.halfOval {
background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
margin: 50px auto;
height: 100px;
width: 400px;
}<div class="halfOval"></div>