CSS實現三角效果

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

<i class="triangle"></i>

.triangle {
     transform: rotate(45deg);
     display: block;
     width: 12px;
     height: 12px;
     border: 1px solid #9e9e9e;
     border-top-color: transparent;
     border-right-color: transparent;
     background-color: #fff;
}

效果：

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

 

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

<i class="triangle"></i>

.triangle {
     display: block;
     position: absolute;
     width: 0;
     border-width: 6px;
     border-color: transparent transparent red;
     border-style: dashed dashed solid;
     top: -12px;
     right: 76px;
}

效果：

 

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

 

小貼士：

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

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

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