1、正圓形

? ? ? ? 給正方形盒子設置圓角屬性為寬高的50%。

div {width: 100px;height: 100px;background-color: plum;border-radius: 50%;
}   

2、膠囊形

? ? ? ? 給長方形盒子設置圓角屬性為盒子高度的50%。

div {width: 200px;height: 100px;background-color: plum;border-radius: 50px;
} 

3、橢圓形

? ? ? ? 給長方形盒子設置圓角屬性為盒子寬高的50%。?

4、三角形

? ? ? ? 苦熬高設置為0，再通過border進行設置即可，若只要下方三角形，將其他三邊的border顏色設置為transprent即可。

div {width: 0;height: 0;border-top: 50px solid yellowgreen;border-bottom: 50px solid deeppink;border-left: 50px solid bisque;border-right: 50px solid chocolate;
}

div {width: 0;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid deeppink;border-left: 50px solid transparent;border-right: 50px solid transparent;
}

5、梯形

? ? ? ? 在三角形的基礎上設置寬度即可。

div {width: 50px;height: 0;border-top: 50px solid transparent;border-bottom: 50px solid deeppink;border-left: 50px solid transparent;border-right: 50px solid transparent;
}

6、菱形

? ? ? ? 將正方形旋轉45度，即可。?

div {height: 100px;width: 100px;transform: rotate(45deg);background-color: #ffaaff;
}

?