用CSS绘制各种角度的三角形 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 用CSS绘制各种角度的三角形

用CSS绘制各种角度的三角形

浏览:1549次出处信息

下面是一些利用CSS中border的特性绘制的各种角度的三角形：

(1)正方形

图1：正方形

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 50px solid gray;
        border-right : 50px solid green;
        border-bottom: 50px solid red;
        border-top : 50px solid yellow;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

如上图1，由于设置了width、height都为0了，所以四个点也就归并成了一个点，后面的各种角度的三角形，其实也就是不断调整那个中心点而已。

(2)向上三角

图2：向上三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right : 50px solid transparent;
        border-bottom: 100px solid red;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(3)向下三角

图3：向下三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right : 50px solid transparent;
        border-top: 100px solid red;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(4)向左三角

图4：向左三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-right: 100px solid red;
        border-top : 50px solid transparent;
        border-bottom: 50px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(5)向右三角

图5：向右三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 100px solid red;
        border-top : 50px solid transparent;
        border-bottom: 50px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(6)左上三角

图6：左上三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-top : 100px solid red;
        border-right: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(7)右上三角

图7：右上三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-top : 100px solid red;
        border-left: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(8)左下三角

图8：左下三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-bottom : 100px solid red;
        border-right: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

(9)右下三角

图9：右下三角

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-bottom : 100px solid red;
        border-left: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：理解SVG transform坐标变换

后一篇：CSS中的margin外边距折叠现象 >>

文章信息

作者：叶德华的博客来源：叶德华的博客
标签： border 三角形
发布时间：2015-11-08 21:50:23

建议继续学习

近3天十大热文