CSS-三角形及其原理

標籤：span   index   down   中比   code   com   簡單的   space   idt   

CSS中三角形在網頁中比較常見，以前是圖片，不過現在基本上都是通過CSS可以完成，實現比較簡單，我們可以看一組簡單的三角形效果:

其實實現起來比較簡單，通過空div然後設定寬高為0，之後可以四周border的寬度，控制三角形的形狀，四個border可以看成是兩橫橫豎的木頭的重疊的效果，兩橫在兩豎上面，三角形就是中間重疊的部分切分出來的,樣式的代碼如下:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

.triangle {    width: 0;    height: 0;    border-top: 20px solid #EEB422;    border-right: 20px solid #C0FF3E;    border-bottom: 20px solid #A020F0;    border-left: 20px solid #7CFC00;} .triangle-up {    width: 0;    height: 0;    border-right: 20px solid transparent;    border-bottom: 40px solid #A020F0;    border-left: 20px solid transparent;} .triangle-down {    width: 0;    height: 0;    border-top: 40px solid #EEB422;    border-right: 20px solid transparent;    border-left: 20px solid transparent;} .triangle-left {    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-left: 40px solid #7CFC00;} .triangle-right {    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-right: 40px solid #C0FF3E;} .triangle-left-bottom {    width: 0;    height: 0;    border-top: 40px solid transparent;    border-left: 40px solid #7CFC00;} .triangle-right-bottom {    width: 0;    height: 0;    border-top: 40px solid transparent;    border-right: 40px solid #C0FF3E;}

具體的html頁面代碼:

123456789101112131415161718192021222324252627282930313233343536

<div class="row">    <span>四個三角</span>    <div class="triangle">    </div></div><div class="row">    <span>上三角</span>    <div class="triangle-up">    </div></div><div class="row">    <span>下三角</span>    <div class="triangle-down">    </div></div><div class="row">    <span>左三角</span>    <div class="triangle-left">    </div></div><div class="row">    <span>右三角</span>    <div class="triangle-right">    </div></div><div class="row">    <span>左下角</span>    <div class="triangle-left-bottom">    </div></div><div class="row">    <span>右下角</span>    <div class="triangle-right-bottom">    </div></div>

CSS-三角形及其原理