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> 

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:50% 0 0 50%;更改你的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> 

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