CSS實現(xiàn)三角效果的簡單實例
發(fā)布時間：2016-08-04 09:35:27 作者：佚名 
我要評論
我要評論下面小編就為大家?guī)硪黄狢SS實現(xiàn)三角效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
方法一：使用border來設置邊框，元素有高度和寬度
XML/HTML Code復制內(nèi)容到剪貼板
- <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屬性可以旋轉(zhuǎn)三角形，達到想要的效果。
方法二：利用border來撐起來三角形
XML/HTML Code復制內(nèi)容到剪貼板
- <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或者點擊選中的時候三角形指向?qū)倪x項
小貼士：
1、學會經(jīng)常使用偽元素例如after或者before來實現(xiàn)三角形
2、兩種方法的區(qū)別：第二種方法設置的三角形背景色和邊框的顏色相同；第一種方法設置的三角形背景色和邊框的顏色可以不相同；需要根據(jù)不同應用場景效果來選擇方法。
第二種方法也可以通過使用兩個顏色不同的三角形覆蓋來實現(xiàn)背景色和邊框色不同的效果。
以上這篇CSS實現(xiàn)三角效果的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
- 這篇文章主要介紹了CSS3 畫基本圖形，圓形、橢圓形、三角形等的相關資料,需要的朋友可以參考下2016-09-20
- 下面小編就為大家?guī)硪黄肅SS制作三角形和按鈕的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-15
CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法
這篇文章主要介紹了CSS仿網(wǎng)易首頁的頭部菜單欄按鈕和三角形制作方法的相關資料,需要的朋友可以參考下2016-08-15
這篇文章主要介紹了使用css實現(xiàn)三角符號效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-09
