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

效果：

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

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

效果：

應(yīng)用場景：點擊234或者點擊選中的時候三角形指向?qū)?yīng)的選項

小貼士：

    1、學(xué)會經(jīng)常使用偽元素例如after或者before來實現(xiàn)三角形

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

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

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

最新評論