標籤：
通過設定div的border屬性，來實現！
將div的height和width屬性分別設定為0px，將4邊的border值設定為一樣的寬度，通過調節邊框的顏色課看到效果。
<style> div{height: 0px;width: 0px; border-top: 20px solid red; border-left: 20px solid blue; border-right: 20px solid gray; border-bottom: 20px solid pink; } </style></head><body> <div></div></body>
即可得到一個由4個三角形組成的正方形。如：
接下去，只要設定將另外3邊的顏色去掉就可以得到三角形，此時設定border-color為transparent，此時就能得到三角形。
div{height: 0px;width: 0px; border-top: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid transparent; }
得到如：
另外，transparent為顏色值，等同於rgba(0,0,0,0)，透明度為0。然而在IE6中不支援，會預設顯示如：
CSS完成三角形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
