HTML: 用CSS畫一個三角形

代碼如下：

<!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>

效果如圖：

三角形成功出現，現在可以做一個模型了，比如tips,warnings.

巴特西

HTML: 用CSS畫一個三角形

最新文章

热门文章