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 clip-path不支持IE支持,则此方法非常有用,因为IE 不支持.

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

这是一个半圆,一个半圆,有悬停效果.

编辑

正如哈利建议的那样,第三种方法是使用伪元素.

.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: "-\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0o";
     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 3

改变你的border-radius喜欢这个border-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>