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来创建半椭圆。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用CSS边框和剪辑路径：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用径向渐变：

您还可以使用radial-gradient背景图片，如下面的代码段创建半椭圆形状，但浏览器对IE中渐变的支持仅来自IE10 +，输出也会产生锯齿状边缘，这使得它不具有美感。由于这些原因，我不建议这样做。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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%;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 5

<!DOCTYPE html>
<html>
<head>
<style>
.circle {  height: 100px;  
            width: 100px; 
            background-color: #ffe0b3; 
            border-radius: 50%; 
         }

 .oval {  height: 50px; 
          width: 100px; 
          background-color: #ffcc80; 
          border-radius: 50%;
       }
.semi-circle { height: 50px;
               width: 100px;
               border-radius: 90px 90px 0 0;
               background: #ffa31a;
             }
</style>
   </head>
<body>

<h4>CSS: Circle </h4>
<div class="circle"></div>

<h4>CSS: Oval </h4>
<div class="oval"></div>

<h4>CSS: Semi-Circle </h4>
<div class="semi-circle"></div>

</body>
</html>

更多访问https://devstudioonline.com/article/working-with-shape-using-css-tricks