題目點評

三角形的圖示在網頁設計是很常見的，屬於基本常識題，只要在練習做到過這個功能都能回答出來，可以把你做過的思路描述出來就可以了，本題的難易程度為簡單

答題要點

1.採用的是均分原理

 盒子都是一個矩形或正方形，從形狀的中心，向4個角上下左右劃分4個部

2.程式碼的實現

第一步 保證元素是塊級元素

第二步 設定元素的邊框

第三步 不需要顯示的邊框使用透明色

 示例程式碼

1. .square{  
2.      width:0;  
3.      height:0;  
4.      margin:0auto;  
5.      border:6pxsolidtransparent
   ;  
6.      border-top: 6pxsolidred;  
7.  }  

效果圖

加分項

  描述自己的心得：在開發中我們也經常設計一個帶缺口的三角形效果，如下圖所示。

上圖效果的做法是這樣的：

1.、兩個三角形（底邊框）的位置、大小要一致

2、裡面的三角形的底邊框顏色為黑色（也可以為其它顏色），外面三角形邊框顏色為白色的背景

3、白色三角形要覆蓋黑色三角形就能形成這樣的形狀了，關於覆蓋的問題可以使用標籤的位置或z-index來改變。

html程式碼

1. <divclass="box b1"></div>
2. <div
   class="box b2"></div>

css程式碼

1.  .box{  
2.      position: absolute;  
3.      left: 0;  
4.      top: 0;  
5.      width: 0;  
6.      height:0;  
7.      border: 6pxsolidtransparent;  
8.  }  
9. .b1{  
10.     border-bottom-color:#000 ;  
11. }  
12. .b2{  
13.     border-bottom-color:#fff ;  
14. }  

感謝：

感謝網友 qq_35104381 提出一個非常有建設性的問題：同樣位置、大小的元素，為什麼白色元素覆蓋黑色元素就形成這樣的缺口了？按理說應該是白色全覆蓋黑色才對！

我覺得這個問題確實很有趣，目前本人認為這是H5聰明的地方，應該是瀏覽器渲染的規則所為！畢竟IE9以下的版本並不支援的。如果大家有更好的解釋歡迎留言，相互交流學些！