這篇文章給大家介紹CSS中怎么實(shí)現(xiàn)三角效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供昌寧網(wǎng)站建設(shè)、昌寧做網(wǎng)站、昌寧網(wǎng)站設(shè)計(jì)、昌寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、昌寧企業(yè)網(wǎng)站模板建站服務(wù)，10多年昌寧做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

2.     
        
   .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屬性可以旋轉(zhuǎn)三角形，達(dá)到想要的效果。

方法二：利用border來(lái)?yè)纹饋?lái)三角形

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

效果：

應(yīng)用場(chǎng)景：點(diǎn)擊234或者點(diǎn)擊選中的時(shí)候三角形指向?qū)?yīng)的選項(xiàng)

小貼士：

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

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

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

關(guān)于CSS中怎么實(shí)現(xiàn)三角效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。