HTML: 用CSS畫一個三角形

浏览数：38 / 时间：2015年06月09日

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用CSS畫一個三角形</title>
    <style>
        #triangle {
            width:0;height:0;
            border-top:100px solid green;
            border-right:100px solid red;
            border-bottom:100px solid black;
            border-left:100px solid blue;
        }
    </style>
</head>
<body>
    
    <div id=‘triangle‘></div>
</body>
</html>

效果如圖：
技术分享

幾個注意：div寬度，高度分別爲0，而div邊框的寬度設定，這時可以看到四個三角形，那麼我們要取哪一個三角形，就需要讓其他三角的邊框的顏色爲透明？

爲什麼是透明，而不是白色呢？？

因爲如果是白色，而三角型所在的區域同時又有背景色，那麼在三角型的區域就會把背景顏色覆蓋。

如下圖：

三角形白色部分把背景顏色覆蓋了！Error!

那麼如何讓邊框變透明呢？？

答案就是border-color屬性中的默認值：transparent

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用CSS畫一個三角形</title>
    <style>
        div.bg {
            background-color:maroon;
            height:500px;
        }
        #triangle {
            width:0;height:0;
            border-top:100px solid transparent;
            border-right:100px solid transparent;
            border-bottom:100px solid black;
            border-left:100px solid transparent;
        }
    </style>
</head>
<body>
    
    <div class=‘bg‘>
        <div id=‘triangle‘></div>
    </div>
</body>
</html>