css画三角形

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style>
        #tri{
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 20px solid red;
            border-right: 10px solid transparent;
            background-color: white;
        }
    </style>
</head>
<body>
<div id="tri"></div>
</body>
</html>

View Code

自己的理解（By8.13）：

三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也就是三角形的颜色，其余三边不设置颜色。
　　说白了就是，宽高设为0，只设置边框，用边框去填充。
　　拿上边的三角形说吧，尖朝上，所以上边的border为0，没边框。
　　颜色也就是下边框填充的。三角形的颜色也就是下边框的颜色。
如果想要设置三角形的大小，修改代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style>
        #tri{
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-left: 20px solid transparent;
            border-bottom: 20px solid red;
            border-right: 20px solid transparent;
            background-color: white;
            /*三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也是三角形的颜色，其余三边不设置颜色*/
        }
    </style>
</head>
<body>
<div id="tri"></div>
</body>
</html>

View Code

效果为：

只需设置需要加宽的方向的border-width即可。

代码再次修改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style>
        #tri{
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-left: 20px solid transparent;
            border-bottom: 20px solid red;
            border-right: 20px  transparent;
            background-color: white;
        }
    </style>
</head>
<body>
<div id="tri"></div>
</body>
</html>

View Code

看效果：

一个直角三角形就出来了，其他自己尝试了。

下面绘制空心三角形。（这个说白了也就用个背景颜色去挡住"空心"的地方）
效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空心三角形</title>
    <style>
        .triangle{
            width: 0;
            height:0;
            border-top: 0 solid transparent;
            border-bottom: 30px solid blueviolet;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: relative;
        }
        .triangleInner{
            width: 0;
            height:0;
            border-top: 0 solid transparent;
            border-bottom: 28px solid white;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            position: absolute;
            left: -8px;
            top:2px;
        }
    </style>
</head>
<body>
<div class="triangle">
    <div class="triangleInner"></div>
</div>
</body>
</html>

View Code

再次创新下代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空心三角形</title>
    <style>
        .triangle{
            width: 0;
            height:0;
            border-top: 0 solid transparent;
            border-bottom: 10px solid darkorange;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: relative;
            top:1px;
            left: 20px;
        }
        .triangleInner{
            width: 0;
            height:0;
            border-top: 0 solid transparent;
            border-bottom: 8px solid white;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            position: absolute;
            left: -8px;
            top:2px;
        }
        .block{
            width: 200px;
            height:100px;
            border:1px solid darkorange;
            text-align: center;
            line-height: 100px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div class="triangle">
    <div class="triangleInner"></div>
</div>
<div class="block">hello world</div>
</body>
</html>

View Code

效果图wei：