css實現橢圓、半橢圓

一、自適應的橢圓

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/