前言：最近發現好多基礎都忘記了，又開始在fcc上進行練習了，順便把css實現各種形狀練習一遍。 最為基礎的矩形、正方形和圓形就不細寫了，瞭解一點css基本都能寫出來。接下來進入正題。 先設定基礎的div樣式，之後就可以想辦法畫各種形狀了。

div{
  width:50px;
  height:50px;
  margin:10px;
}

1、菱形 菱形可以看作是對正方形的旋轉而成，因此需要用到transform屬性，這個屬性支援對元素的旋轉、縮放、移動、傾斜等操作，菱形用到了其中的旋轉操作。 css程式碼：

.diamond{
  margin-top:20px;
  background-color:blue;
  transform:rotate(45deg);  /*角度設定為正負都可以實現*/
}
 

2、梯形 梯形需要用到border屬性，先通過border-bottom實現矩形，然後新增兩側邊框實現梯形（以上短下長的梯形為例） css程式碼：

.echelon{
  height:0px;
  margin-top:30px;
  border-bottom:50px solid green;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}

3、三角形 使用border屬性實現，先設定4個邊的邊框，然後把不需要的邊框設定為透明色不顯示，只留下需要的邊框。（邊框對應的方向依次為上、右、下、左） css程式碼：

.triangle{
  width:0px;
  height:0px;
  border-width: 50px;
  border-style: solid;
  border-color: transparent transparent blue transparent;
}

4、半圓 可以看作是實現圓形的進階版了，使用border-radius屬性，把需要的對應兩個角的值設定為寬和高一樣的值，然後把高度或寬度縮至原來的一半。（程式碼以左上角、右上角為例） css程式碼：

.semi-circle{
  border-radius:50px 50px 0 0;
  background-color:#00ffff;
  height:25px;
}
 

5、扇形 可以說是相當簡單好實現了，只需要對需要留下的對應的角設定值就可以得到一個扇形。（程式碼是以左上角為例） css程式碼：

.sector{
  border-radius: 50px 0 0 0;
  background-color:green;
}

6、月牙 開始以為是兩個圓的疊加覆蓋，後來發現用box-shadow屬性可以輕鬆實現。 css程式碼：

.moon{
  background-color: transparent;
  border-radius:50%;
  box-shadow: 10px 10px 0px 0px #ffff66; 
}

7、心形 用到了偽類:before,:after屬性，實現的原理還有待深入理解。 css程式碼：

.heart{
  background-color:pink;
  position:absolute;
  top:100px;
  bottom:0;
  left:100px;
  right:0;
  transform:rotate(-45deg);
}
.heart:before{
  content: "";
  background-color:pink;
  border-radius:50%;
  width:50px;
  height:50px;
  position:absolute;
  top:0px;
  left:25px;
}
.heart:after{
  content:"";
  width:50px;
  height:50px;
  background-color:pink;
  border-radius:50%;
  position:absolute;
  top:-25px;
  left:0px;
}

關於程式碼和理解就寫這麼多了，後期如有其他練習再進行補充，最後效果圖如下：