html - CSS中的半椭圆形

Question

我已经设法在 CSS 中创建了一个椭圆形。我现在如何水平将其减半？

http://jsfiddle.net/Lejqovqy/

.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

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