[轉]CSS實現三角形的方法

1：border分割線解析

 　　　　　　　　　　　　　　　　　　　　

  width:40px;
  height:40px;
　background:#000;
  border-width:30px;
  border-style:solid;
  border-color:#e66161 #f3bb5b #94e24f #85bfda;

 

 參照以上代碼，按照個人理解，盒模型應該是這樣

 

可是實際上圖片是這樣的

 

4個邊框是上圖4種不一樣顏色的方框，固然這是我理解的應該是這樣，可是事實上不是想象中的那樣

爲何呢？這個緣由我也糾結了很久

 

看下上圖盒模型，問個問題，按照我理解的盒模型所示的4種邊框如何顯示？尤爲是紅色箭頭兩個border重疊處，難道顯示2種重疊顏色？那是什麼顏色了？這也太扯了吧，因此這也就是問題緣由所在

緣由就是「瀏覽器自動把boder重疊處平分爲兩半「

 

因此纔會出現上圖那樣，在兩種不一樣顏色的border交界處有一條很明顯的分割線（第一張圖中的白色箭頭）

也就是在盒模型中兩個border重疊（紅色箭頭）區域進行平分

 

固然明白了以上原理，用css畫三角形就很快就能上手了

 

2.當第一個圖形高度爲0的狀況會發生什麼事情呢？

代碼以下

 

 background:#000;
 border-width:30px;
 border-style:solid;
 border-color:#e66161 #f3bb5b #94e24f #85bfda; 

 

固然你們會想了，高度爲0，圖形如何呈現出來呢？高度爲0，可是有border，因此，看到以下圖形

你會發現沒有高度以後固然background也不會顯示了，只會把它自己的border顯示出來，並且「瀏覽器自動把boder重疊處平分爲兩半「，因此就成了上圖那樣

看到這裏，相信應該明白如何作三角形了

3. transparent

transparent，被用來做爲顏色的一個參數值，用於表示背景透明，也就是背景色

因此，當咱們把代碼改爲以下

border-width:30px;
border-style:solid;
border-color:#f3bb5b transparent transparent transparent;　

你會發現成了下面的圖形，固然我們的背景色是白色

他這種圖形是吧右，下，左的邊框都改爲了透明色，因此會呈現爲下三角

若是你要說我要作個有三角，這個在切換輪播圖的時候做爲按鈕比較常見，那咱們都知道一個上右下左的原則，你選擇哪個方向做爲透明色，那他就成了反方向的三角形，如上圖

再舉個例子，左三角的話，右邊框有顏色，其他背景色就能夠了，仔細考慮下是否是這樣？像下面這些

ps：IE6下把邊框設置成 transparent 時會出現黑影，並不會透明，把 border-style 設置成 dashed 能夠解決。

 

4.拓展1：實現好看的tip框，以下圖所示

 

我的掌握的有3種方法 div嵌套、transform選擇、特殊符號◆.這三種方法

　　　　方法1：div嵌套

　　　　

/*HTML*/
<div class="parent1">       /*這裏要注意2個div的嵌套順序*/
　　<div class="div2"></div>
　　<div class="div1"></div>
</div>

/*css Document*/
.parent1{
　　　　　position: relative;
　　　　　width: 150px;
　　　　　height: 70px;
　　　　　background:#dddddd;
　　　　　border:1px solid #f07848;
　　　　　border-radius: 10px;
}
.div1{
　　　　position:absolute;
　　　　bottom:-10px;
　　　　border-style:solid;
　　　　border-width:15px;
　　　　border-color:#dddddd transparent transparent transparent;
}
.div2{
　　　　position:absolute;
　　　　bottom:-11px;
　　　　border-style:solid;
　　　　border-width:15px;
　　　　border-color:#f07848 transparent transparent transparent;
}

在這個div嵌套裏面要注意2個div的嵌套順序和2個div間隔1個像素來顯示，當你作出來時你放大會感受有點瑕疵，固然用戶通常不會追究這些的

　　　　

 

 

　　　　方法2.transform實現

/*HTML*/
<div class="parent2">
　　<div class="div3"></div>
</div>

/*css Document*/
.parent2{
　　　　position:relative;
　　　　width:150px;
　　　　height:70px;
　　　　background:#dddddd;
　　　　border:1px solid #f07848
　　　　border-radius:10px;
}
}
.div3{
　　　　position:absolute;
　　　　top:563px;
　　　　left:805px;
　　　　width:20px;
　　　　height:20px;
　　　　background:#dddddd;
　　　　border-width: 15px;
　　　　border-left:1px solid #f07848;
　　　　border-bottom: 1px solid #f07848;
　　　　transform:rotate(-45deg);
}

 固然這裏兼容性沒寫，也不是太好

 

　　　　3.特殊字符實現:和第一中方法相似，建立2個含有特殊字符的div框嵌套在一塊兒，修改文字顏色和div的邊框實現,固然你會看到firebug上籃框那麼高，那是字體高度

/*HTML*/
<div class="parent3">
　　<div class="div4">◆</div>
　<div class="div5">◆</div>

</div>

/*css Document*/
.parent3{
　　　　　　position:releative;
　　　　　　width: 150px;
　　　　　　height: 70px;
　　　　　　border:1px solid #f07848;
　　　　　　background:#dddddd;
　　　　　　border-radius: 10px;
}
.div4{
　　　　position: absolute;
　　　　left:70px;
　　　　bottom:-15px;
　　　　font-size:30px;
　　　　color:#f07848;
}
.div5{
　　　　position: absolute;
　　　　left:70px;
　　　　bottom:-16px;
　　　　font-size:30px;
　　　　color:#dddddd;
}

 

2014-12-4 09:53:08

再補充一個經過:before僞元素實現三角

老樣子，先貼代碼

 

div:before{
　　　　　　position:absolute;
　　　　　　border-color:transparent;
　　　　　　border-right-color:#000;
　　　　　　border-width:15px;
　　　　　　border-style:solid;
　　　　　　display:block;
　　　　　　content:" ";
　　　　　　top:20px;
　　　　　　left:-30px;
　　　　　　width:0;
　　　　　　height:0;
} div:after{
　　　　　　position:absolute;
　　　　　　border-color:transparent;
　　　　　　border-right-color:#fff;
　　　　　　border-width:15px;
　　　　　　border-style:solid;
　　　　　　display:block;
　　　　　　content:" ";
　　　　　　top:20px;
　　　　　　left:-30px;
　　　　　　width:0;
　　　　　　height:0;
}

 這裏的要點是2個僞元素須要相差一兩個像素的距離，一個是背景色的僞元素蓋住了有顏色（邊框顏色）的僞元素，層疊顯示的，這種感受是最簡單的方式，固然有更好的，目前我沒有找到

更新：

新方法實現一個旋轉45度的高寬爲0，只有border的正方形，這種方法目前是除了切圖外是最好的

 1  　　em{  2  position:absolute;  3 /*這裏寫成你想要的位置*/  4  left:73px;  5  top:11px;  6 /*這裏寫成你想要的背景色*/  7  background:#ffffff;  8 /*這裏寫成你想要的哪一邊邊框顏色*/  9  border-top:1px solid #CAC1C1; 10  border-left:1px solid #CAC1C1; 11 /*這裏寫成你想要的大小*/ 12  width:10px; 13  height:10px; 14 /*旋轉45度兼容*/ 15  transform: rotate(45deg); 16  -o-transform: rotate(45deg); 17  -webkit-transform: rotate(45deg); 18  -moz-transform: rotate(45deg); 19  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779); 20 }