css實現三角的一些方法

標籤：style   blog   http   color   使用   os   io   width   

css實現三角沒有想象中的那麼難，只要明白border的各種屬性的意思就很好明白css三角是如何?的。

一下是幾個很簡單的例子：

  css三角形狀的製作：        css樣式:   .triangle{     width:0;     height:0;     border-left:10px solid transparent;     border-right:10px solid transparent;     border-top:10px solid red; }  方法解釋：定義 左右兩邊邊框透明，下邊框不定義，上邊框定義顏色即可 此種樣式是上方樣式的一種變種，只需將border-left:的寬度設定大一點，代碼如下： .triangle{     width:0;     height:0;     border-left:30px solid transparent;     border-right:10px solid transparent;     border-top:10px solid red; } 同樣可以實現左箭頭或者右箭頭，只需要設定 border-top/border-bottom 顏色為transparent，設定一下右邊框的顏色即可.triangle{     width:0;     height: 0;
     border-top: 20px solid transparent;
     border-bottom:20px solid transparent;
     border-right:20px solid red;} 這樣的效果通過變樣的方式也是可以實現的：左邊顏色透明，上方和右方設定顏色，下方設定另外一種顏色.triangle{
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            border-color: #ff1515 #ff1515 #920000 transparent;
        } 這樣的三角和上面的三角的實現思路是一致的：.triangle{     width:0;     height:0;     border-width:10px;     border-style:solid;     border-color:red red transparent transparent;} 實現這種的帶邊框的三角，一般會用到兩個標籤div或者span i等隨意的標籤進行疊加，是可以實現的，還有一種算是投機取巧的方式如下：使用2個◆符號來實現三角的形狀<span class="z">◆</span> <span class="y">◆</span> 基本結構如下：
        <div class="x">
            <p><a href="#">用物件導向的思想去書寫css,用物件導向的心態去書寫css。</a></p>
            <span class="z">◆</span> <span class="y">◆</span>         </div>
.x{ width:180px; position:relative; background:#fff;  border:1px solid #ccc; padding:10px; left:-4px; top:-4px;}/*內容div*/.y , .z{position: absolute;left: 141px; }

 .y{color: #ccc;font-size: 19px; top:-12px;z-index:1;}/*類比小三角*/

 .z{color: #fff;font-size: 19px;top:-11px;  z-index:3;}/*類比小三角*/ 將z中的實心菱形顯示在上方，遮蓋在y的實心菱形上方，所看到的三角的邊框，是y元素的顏色