一、三角形
如下圖，通過設置 border 的大小和顏色可以形成四個三角形：
上圖對應的代碼為：
/* 三角形 */.triangle {width: 0;height: 0;border-top: 100px solid green;border-right: 100px solid red;border-bottom: 100px solid blue;border-left: 100px solid yellow;}
而要想實現繪制三角形，只需要將其他三個方向的 border 設置成“transparent”，如下圖：
若要繪制直角三角形，則將其中兩個方向的 border 設置成“transparent”，例如把 border-top 和 border-right 設置成透明的，得到的直角三角形如下圖：
二、梯形
梯形的繪制和三角形類似，如下圖：
而若要繪制某個方向的梯形，只需要將其他三個方向設置成“transparent”，如下圖：
上圖對應的代碼為：
/* 梯形 */.trapezoidal {width: 50px;height: 50px;border-top: 50px solid transparent;border-right: 100px solid transparent;border-bottom: 50px solid blue;border-left: 100px solid transparent;}
三、平行四邊形
平行四邊形可以通過使用 skewX 或者 skewY 將矩形扭曲形變得到，如下圖：
上圖對應的代碼為：
/* 平行四邊形 */.parallelogram {width: 200px;height: 80px;background: green;transform: skewX(-45deg);}
四、菱形
菱形可以通過使用 rotate 將正方形進行旋轉得到，如下圖：
上圖對應的代碼為：
/* 菱形 */.diamond {width: 100px;height: 100px;background: blue;transform: rotate(45deg);}
除此之外，還可以將兩個三角形拼起來形成一個菱形，如下圖：
上圖對應的代碼為：
/* 菱形 */.diamond {width: 0;height: 0;border-top: 100px solid transparent;border-right: 100px solid blue;border-bottom: 100px solid transparent;border-left: 100px solid transparent;}
.diamond::after {content: "";position: absolute;left: 208px;top: 7px;width: 0;height: 0;border-top: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid transparent;border-left: 100px solid green;}
五、扇形
90度的扇形好繪制的，如下圖：
上圖對應的代碼為：
/* 扇形 */.sector {width: 100px;height: 100px;border-radius: 100px 0 0;background: green;}
六、橢圓
繪制橢圓時需要設置兩個 border-radius，分別是對應矩形長和寬的一半，如下圖：
上圖對應的代碼為：
/* 橢圓 */.ellipse {width: 200px;height: 100px;border-radius: 100px / 50px;background: blue;}
七、圓環
圓環可以看作一個由一個大圓形和一個小圓形構成的，通過改變小圓的顏色就能形成圓環的效果，如下圖：
上圖對應的代碼為：
/* 圓環 */.ring {width: 100px;height: 100px;border-radius: 50px;background: yellow;}
.ring::after {content: "";position: absolute;left: 23px;top: 23px;width: 70px;height: 70px;border-radius: 35px;background: darkgray;}
八、心形
繪制出來的心形如下圖：
上圖對應的代碼為：
/* 心形 */.heart {width: 0;height: 0;}
.heart::before,.heart::after {position: absolute;left: 50px;content: "";top: 10px;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}
.heart::after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}