DIV CSS 佈局教程網

方法一：使用border來設置邊框，元素有高度和寬度

1. <i class="triangle"></i>    
2.      
3. .triangle {    
4.      transform: rotate(45deg);    
5.      display: block;    
6.      width: 12px;    
7.      height: 12px;    
8.      border: 1px solid #9e9e9e;    
9.      border-top-color: transparent;    
10.      border-right-color: transparent;    
11.      background-color: #fff;    
12. }    

效果：

利用transform屬性可以旋轉三角形，達到想要的效果。

方法二：利用border來撐起來三角形

1. <i class="triangle"></i>    
2.      
3. .triangle {    
4.      display: block;    
5.      position: absolute;    
6.      width: 0;    
7.      border-width: 6px;    
8.      border-color: transparent transparent red;    
9.      border-style: dashed dashed solid;    
10.      top: -12px;    
11.      right: 76px;    
12. }    

效果：

應用場景：點擊234或者點擊選中的時候三角形指向對應的選項

小貼士：

    1、學會經常使用偽元素例如after或者before來實現三角形

    2、兩種方法的區別：第二種方法設置的三角形背景色和邊框的顏色相同；第一種方法設置的三角形背景色和邊框的顏色可以不相同；需要根據不同應用場景效果來選擇方法。

第二種方法也可以通過使用兩個顏色不同的三角形覆蓋來實現背景色和邊框色不同的效果。

以上這篇CSS實現三角效果的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。