CSS-三角形及其原理

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

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

    .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頁面代碼:

    <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>
    <p>博客園-FlyElephant:http://www.cnblogs.com/xiaofeixiang/</p>