Question

我正在尝试在椭圆和半圆之间创建混合。

半圆可以在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;
}

椭圆形可以这样制作：

.oval { 
    background-color: #80C5A0;
    width: 400px;
    height: 200px;
    margin: 100px auto 0px;
    border-radius: 200px / 100px;
}

但我怎样才能做出半椭圆形呢？到目前为止，这是我的尝试。发生的问题是我有平顶，发现here。谢谢！

Answer 1

我已经使用一种可能的解决方案更新了您的演示：

div {
  background-color: #80C5A0;
  width: 400px;
  height: 100px;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

<div></div>

通过对border-radius使用基于百分比的单位，无论您的width和height值如何，都应始终保持平滑的半椭圆。

通过一些小的改动，这里是你如何将半椭圆半垂直分割成一半：

div {
  background-color: #80C5A0;
  width: 400px;
  height: 100px;
  border-radius: 100% / 50%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<div></div>

Answer 2

http://jsfiddle.net/QGtzW/4/

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

Answer 3

我们也可以使用css3 radial-gradient()来绘制这个形状：

.halfOval {
  background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
}

＆＃13;

.halfOval {
  background: radial-gradient(ellipse at 50% 100%, #a0C580 70%, transparent 70%);
  margin: 50px auto;
  height: 100px;
  width: 400px;
}

＆＃13;

<div class="halfOval"></div>

＆＃13;

带有CSS的半椭圆形

3 个答案: