CSS 中的半椭圆形

Question

我成功地在 CSS 中创建了一个椭圆形。我现在如何水平减半？

.oval {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  border: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  -o-text-overflow: clip;
  text-overflow: clip;
  border: 1px solid #1abc9c;
}

<div class="oval"></div>

Answer 1

像这样改变你的border-radiusborder-radius:50% 0 0 50%;

.oval {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 200px;
  height: 200px;
  border: none;
  -webkit-border-radius:50% 0 0 50%;
  border-radius:0 0 50% 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  border: 2px solid #1abc9c;
  border-top:0;
  border-right:0;
  border-left:0;
}

<div class="oval"></div>

Answer 2

使用 SVG：

我建议您使用 SVG 创建半椭圆形，因为它比使用 CSS 更容易。下面是一个示例片段，它使用绝对定位的 SVG 元素和圆弧 path 来创建半椭圆。

.oval {
  position: relative;
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-overflow: clip;
}
.oval svg, .shape svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
.oval path, .shape path {
  stroke: #1abc9c;
  fill: transparent;
}
.oval path:hover{
  fill: #1abc9c;
}

/* for the full shape */
.shape {
  position: relative;
  box-sizing: content-box;
  width: 300px;
  height: 150px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-overflow: clip;
}
#bottom-oval:hover{
  fill: #1abc9c;
}
  
span{
  position: absolute;
  color: #1abc9c;
  bottom: 30%;
  left: 50%;
}

<div class="oval">
  <svg viewBox='0 0 200 100' preserveAspectRatio='none'>
    <path d='M2,50 A98,48 1 1,0 198,50' />
  </svg>
</div>

<hr>

<!-- Just to illustrate the whole thing you're trying is possible with SVG -->
<div class="shape">
  <svg viewBox='0 0 200 150' preserveAspectRatio='none'>
    <path d='M2,8 2,92 A6,6 0 0,0 8,98 L80,98 M128,98 L192,98 A6,6 0 0,0 198,92 L198,8 A6,6 0 0,0 192,2 L8,2 A6,6 0 0,0 2,8' />
    <path d='M80,97 A24,20 1 1,0 128,97' id='bottom-oval'/>
  </svg>
  <span>+</span>
</div>

使用 CSS 边框和剪辑路径：

如果您真的想使用 CSS 边框，可以采用的另一种方法是 clip-path 以及内联 SVG，如下面的代码片段所示。这只是切掉椭圆的顶部，从而产生半椭圆形。如果不需要 IE 支持，此方法很有用，因为 IE 不支持 clip-path。

.oval {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  text-overflow: clip;
  border: 1px solid #1abc9c;
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,1 0,0.5 1,0.5 1,1z' />
    </clipPath>
  </defs>
</svg>
<div class='oval'></div>

使用径向渐变：

您也可以像下面的代码片段一样使用 radial-gradient 背景图片来创建半椭圆形，但 IE 中对渐变的浏览器支持仅来自 IE10+，并且输出也会产生锯齿状边缘，这使得它不是真的审美的。由于这些原因，我不推荐这个。

.oval {
  box-sizing: content-box;
  width: 200px;
  height: 50px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  text-overflow: clip;
  background: radial-gradient(ellipse 190px 90px at 50% 0%, transparent 48%, #1abc9c 48%, #1abc9c 50%, transparent 50%);
}

<div class="oval"></div>

Answer 3

这里是半圆，半圆，有悬停效果

编辑

还有第三种方法，正如 Harry 所建议的那样，使用伪元素。

.div1{
     display: inline-block;
     height:45px;
     width:90px;
     border: 1px solid #999;
     border-width: 0 1px 1px 1px;
     -webkit-border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     border-radius: 0 0 90px 90px;
}
.div2{
     display: inline-block;
     margin-left: 20px;
     height:30px;
     width:90px;
     border: 1px solid #999;
     border-width: 0 1px 1px 1px;
     border-radius: 50% / 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
.div3 {
     display: inline-block;
     position: relative;
     height:90px;
     width:180px;
     border: 1px solid #999;
     border-radius: 10px;
}
.div3:after{
     content: "";
     position: absolute;
     top: 45px;
     left: 45px;
     height:30px;
     width:90px;
     border: 1px solid #999;
     border-width: 0 1px 1px 1px;
     border-radius: 50% / 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
.div3:before{
     content: "-[=10=]a0[=10=]a0[=10=]a0[=10=]a0[=10=]a0[=10=]a0[=10=]a0[=10=]a0[=10=]a0[=10=]a0o";
     position: absolute;
     top: 20px;
     left: 66px;
}
div:hover {
     background-color: #DDD;
}
div:hover:after {
     background-color: #BBB;
}

<div class="div1"></div><div class="div2"></div>
<br /><br />
<div class="div3"></div>

Answer 4

.oval {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  border: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border-bottom-right-radius:0px;
  border-top-right-radius:0px;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0, 0, 0, 1);
  -o-text-overflow: clip;
  text-overflow: clip;
  border: 1px solid #1abc9c;
}

<div class="oval"></div>

CSS 中的半椭圆形

Half an oval shape in CSS

html

css

css-shapes