您好,登錄后才能下訂單哦!
這篇文章給大家介紹CSS中怎么實現(xiàn)三角效果,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
方法一:使用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來撐起來三角形
XML/HTML Code復制內容到剪貼板
<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、學會經(jīng)常使用偽元素例如after或者before來實現(xiàn)三角形
2、兩種方法的區(qū)別:第二種方法設置的三角形背景色和邊框的顏色相同;第一種方法設置的三角形背景色和邊框的顏色可以不相同;需要根據(jù)不同應用場景效果來選擇方法。
第二種方法也可以通過使用兩個顏色不同的三角形覆蓋來實現(xiàn)背景色和邊框色不同的效果。
關于CSS中怎么實現(xiàn)三角效果就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。