您的位置：首页 > Web前端 > CSS

使用CSS绘制三角形

2016-03-31 13:41 633 查看

今天有个同学询问了我关于使用CSS制作三角形的问题，我也没有怎么想考虑，直接给了源码。然后她询问了一系列的问题，我才意识到，这类代码网上一般都有，缺的是制作的原理，于是就有了编写博客的想法。

下面我们先来看一下效果：

接下来我们看一下源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
width: 0;
height: 0;
border-left: 110px solid red;
border-right: 110px solid yellow;
border-top: 110px solid black;
border-bottom: 110px solid black;
display: inline-block;
}
.triangle{
border-right: 0;
border-top: 110px solid transparent;
border-bottom: 110px solid transparent;
}
</style>
<body>
<div></div>
<div class="triangle"></div>
</body>
</html>

下面我们来分析绘制三角形的原理：

首先我们知道css是采用盒子模型：所谓盒子模型，就是元素的内容（content）外层包裹补丁（padding），边框（border），再加上一层边距（margin）。你可以想象成有一个纸盒子，里面存放的东西就是元素的内容（content），而盒子的纸板就是边框（border），补丁（padding）就是纸板和东西之间的空隙，如果有多个盒子，那么盒子与盒子之间的空隙就是margin。当然，css的盒子模型并不是那么简单，有兴趣的读者可以查询的其他资料。

话归正题，我们来解释三角形的绘制原理：

当一个div的外层包裹了一层border，我们不妨将它的border宽度设置为一个极大的数，如110px（虽然我们平时并不经常这样做），并且把它上下左右边框设置为不同的颜色，另外我们将div的宽高设置成一个较小的数，如50px,见下面代码：

div{
width: 50px;
height: 50px;
border-left: 110px solid red;
border-right: 110px solid yellow;
border-top: 110px solid black;
border-bottom: 110px solid black;
display: inline-block;
}

现在我们再来看效果：

同时，我们发现，border-right的绘制范围，图中梯形abcd的部分。其中ab是border最外围的顶点，cd是content以及padding（图中padding为0）组成的矩形的顶点。事实上，border也是这样绘制的。

我们可以想象，随着div的高度不断减小，cd的长度也将不断减少，当div的高度变为0时，这时，cd也成了一个点，这时border-right成了一个三角形，如下图所示：

如果，div此时的width也变为0px，我们可以想象，这个div将会变成一个由4个三角形组成的矩形。这个时候，如果我们把border-top以及border-bottom，border-letf颜色设置为透明，将会看到什么？不错，一个向左朝向的三角形，至此，我们绘制三角形的原理讲完。

下面是利用border的每一边绘制绘制范围的原理，绘制一些其他的图形。

.arc{
width: 0px;
height:0px;
border-left: 110px solid yellow;
border-right: 0;
border-top: 110px solid transparent;
border-bottom: 110px solid transparent;
display: inline-block;
border-radius: 50%
}
.trapezoid{
width: 0px;
height:50px;
border-left: 110px solid yellow;
border-right: 0;
border-top: 110px solid transparent;
border-bottom: 110px solid transparent;
display: inline-block;
}
.circle {
width: 50px;
height: 50px;
border-left: 110px solid yellow;
border-right: 110px solid yellow;
border-top: 110px solid red;
border-bottom: 110px solid black;
display: inline-block;
border-radius: 50%;
}
.ellipse{
width: 0px;
height:50px;
border-left: 110px solid yellow;
border-right: 110px solid yellow;
border-top: 110px solid yellow;
border-bottom: 110px solid yellow;
display: inline-block;
border-radius: 50%
}
.label{
width: 0px;
height:50px;
border-left: 20px solid #f67a81;
border-right: 20px solid #f67a81;
border-top: 20px solid #f67a81;
border-bottom: 20px solid transparent;
display: inline-block;
}

图形：

最后，由于这是本人第一次写博客，经验有限，而且本人网页知识有限，理解不深，如果有错误，请不吝赐教。谢谢

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS 三角形原理

相关文章推荐

新的分享

章节导航