首頁 >web前端 >css教學 >CSS實現三角效果的實例詳解

CSS實現三角效果的實例詳解

高洛峰
高洛峰原創
2017-03-04 10:34:141505瀏覽

方法一:使用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;    
}

效果:

CSS實現三角效果的實例詳解

利用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;    
}

效果:

CSS實現三角效果的實例詳解

 

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

CSS實現三角效果的實例詳解

 

小秘訣:

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

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

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

以上這篇CSS實現三角效果的簡單實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

更多CSS實現三角效果的實例詳解相關文章請關注PHP中文網!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn