由於同學問了我一下如何用純css去制作一個橢圓形的問題，於是我就在工作空閑的時候自己去試了一下。
這里只是簡單的做下記錄。如果有問題或者有更加好的方法的小伙伴可以給我留言，當然關於web端至古以來都存在的瀏覽器兼容性問題這里沒有考慮,大部分主流的瀏覽器（谷歌/火狐/Opera/IE 9+/Safari ）都是可以的，IE 9需要在屬性名前加上瀏覽器的前綴-ms- 。
HTML代碼只需要添加一個div並為其添加一個ellipse的自定義類
<div class="ellipse">
</div>
CSS代碼
.ellipse{
margin-left: 100px;
width:100px;
height:100px;
border:solid 0.5px black;
background: deepskyblue;
border-radius: 50px;
transform: rotateX(70deg);//css3新屬性
}
.ellipse:after{
content: '';
display:inline-block;
width:100px;
height: 140px;
position:relative;
opacity: 0.6;
background: deepskyblue;
top:50%;
left:-0.5px;
border-left:black 0.5px solid;
border-right:black 0.5px solid;
border-bottom: black 0.5px solid;
border-bottom-left-radius: 50px;//css3新屬性
border-bottom-right-radius: 50px;
}
效果圖
