僅用CSS 建立各種不同的圖形形狀

　介紹

　　今天，我們要學習如何使用簡單的CSS來建立不同類型的平面圖形。

　使用代碼

　　矩形

.rectangle {    width: 250px;    height: 150px;    background-color: #6DC75F;}<p></p>

　　三角形

.triangleUp {            border-left: 75px solid transparent;            border-right: 75px solid transparent;            border-bottom: 150px solid  #6DC75F;            width: 0;            height: 0;        }<p class="triangleUp"></p>

　　橢圓形

.oval {    width: 300px;    height: 150px;    background: #6DC75F;    -moz-border-radius: 150px / 75px;    -webkit-border-radius: 150px / 75px;    border-radius: 150px / 75px;}<p class="oval"></p>

　　月牙形

.moon {  width: 150px;  height: 150px;  border-radius: 50%;  box-shadow: 15px 15px 0 0 green;}<p class="moon"></p>

　　樹葉

.leaf {    border-radius: 5px 300px 3px 300px;    background: #6DC75F;    width: 150px;    height: 150px;}<p class="leaf"></p>

　興趣點

　　CSS能讓你完成很多令人驚豔的事情…祝大家編碼愉快！