畫四分之一圓的時候，是畫出一個圓並且結合overflow等實現，但是其實可以直接畫出半圓或者四分之一圓，之前忽略了幾個屬性。

圓的畫法：先畫相應矩形，在用border-radius

1.畫出圓

{
  width:100px;
  height:100px;
  border-radius:50px;
}

2.畫出方向四個不同的本圓

.top
{
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
}
.right {
  height: 100px;
  width: 50px;
  border-radius: 0 50px 50px 0
 
;
}
.bottom {
  width: 100px;
  height: 50px;
  border-radius: 0 0 50px 50px;
}
.left {
  width: 50px;
  height: 100px;
  border-radius: 50px 0 0 50px;
}

3.畫出四分之一個圓方法：

{
  width:50px;
  height:50px;
  border-radius:50px 0 0 0;
}

4.橢圓

<div class="ellipse">
</div>
 .ellipse{
    width: 200px;
    height: 100
 
px;
    border-radius: 50%;
    background: black;
}

5.沿橫軸、縱軸劈開的半橢圓

<div class="x-ellipse">
</div>
<div class="y-ellipse">
</div>

.x-ellipse{
    width: 200px;
    height: 150px;
    border-radius: 50%/ 100% 100% 0 0;
    /*相當於50% 50% 50% 50%/ 100% 100% 0 0;*/
    background: black;
}
.y-ellipse{
    width: 200
 
px;
    height: 150px;
    border-radius: 100% 0 0 100%/50%;
    background: black;
}        

6.四分之一橢圓

<div class="quarter-ellipse">
</div>
.quarter-ellipse{
    width: 200px;
    height: 150px;
    border-radius: 100% 0 0 0;
    background: black;
}

7.菱形

如果想讓形狀變形，但是裡邊的字型不變形

思路：
變形之後，再讓裡邊內容旋轉回來

<div class="paralle"><p>transform:skew()</p></div>

.paralle {
    position: relative;
    left: 100px;
    width:200px;
    height: 100px;
    background:#44a5fc;

    line-height: 100px;
    text-align: center;
    font-weight: bolder;

    transform: skew(-20deg);
}
.paralle p{
    transform: skew(20deg);
}

8.三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid lightblue;
}
#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid lightblue;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid lightblue;
    border-bottom: 50px solid transparent;
}
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid lightblue;
    border-bottom: 50px solid transparent;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid lightblue;
    border-right: 100px solid transparent;
}
#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid lightblue;
    border-left: 100px solid transparent; 
}
#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid lightblue;
    border-right: 100px solid transparent;
}
#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid lightblue;
    border-left: 100px solid transparent;
}

9.一些屬性的說明

border-radius:50px 0 0 0
等價於將border-raduis屬性分成四個屬性來設定，把一個圓分成上左，上右，下右，下左4份
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

首選需要了解border-radius
border-radius可以是元素也可是百分比。
border-radius:border-top-left-radius,border-top-right-radius,
border-bottom-right-radius,border-bottom-left-radius;
不僅僅可以為四個角分別設定值，甚至可以給每個角提供水平和垂直半徑
方法是在斜槓前指定 1~4 個值，在斜槓後指定另外 1~4 個值
舉例來說，
當 border-radius 的值為10px / 5px 20px 時，
其效果相當於 10px 10px 10px 10px / 5px 20px 5px 20px 。