css實現橢圓、半橢圓

1、自適應的橢圓

1. 橢圓

css

.ellipse{
  width: 250px;
  height: 150px;
  margin: 50px;
  background: #FFD900;
  border-radius: 50% / 50%;
}

效果圖

2.半橢圓

 

因此如今咱們知道怎麼來實現半橢圓了吧：

css

.ellipse{
  width: 550px;
  height: 150px;
  margin: 50px;
  background: #FFD900;
  border-radius: 50% / 100% 100% 0 0;
}

效果圖

由圖中效果能夠知道，沿着橫軸切割的橢圓至關於左上角和右上角的切角橢圓重合，而且左上角（右上角）切角橢圓的橫軸半徑佔元素寬度的50%，縱軸半徑佔元素高度的100%，右下角（左下角）的沒有圓角，所以縱軸寬度爲0，橫軸寬度只須要小於等於元素寬度的50%便可。

沿縱軸方向切割的半橢圓

css

效果圖

 由圖中效果能夠知道，沿着縱軸切割的橢圓至關於左上角和左下上角的切角橢圓重合，而且左上角（左下角）切角橢圓的橫縱軸半徑佔元素高度的50%，橫軸半徑佔元素寬度的100%，右上角（右下角）的沒有圓角，所以橫軸寬度爲0，縱軸寬度只須要小於等於元素高度的50%便可。

這樣讓咱們在實現如下1/4橢圓

css

效果圖

 

 

 

 參考：http://blog.csdn.net/xiaoermingn/article/details/53497607

http://www.zhangxinxu.com/wordpress/2015/11/css3-border-radius-tips/