欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)三角效果的簡(jiǎn)單實(shí)例

  發(fā)布時(shí)間：2016-08-04 09:35:27   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇CSS實(shí)現(xiàn)三角效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <i class="triangle"></i>    
  2.      
  3. .triangle {    
  4.      transform: rotate(45deg);    
  5.      display: block;    
  6.      width: 12px;    
  7.      height: 12px;    
  8.      border: 1px solid #9e9e9e;    
  9.      border-top-color: transparent;    
  10.      border-right-color: transparent;    
  11.      background-color: #fff;    
  12. }    

效果：

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

 

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <i class="triangle"></i>    
  2.      
  3. .triangle {    
  4.      display: block;    
  5.      position: absolute;    
  6.      width: 0;    
  7.      border-width: 6px;    
  8.      border-color: transparent transparent red;    
  9.      border-style: dashed dashed solid;    
  10.      top: -12px;    
  11.      right: 76px;    
  12. }    

效果：

 

應(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)背景色和邊框色不同的效果。

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

相關(guān)文章

最新評(píng)論