使用CSS绘制三角形

最新推荐文章于 2024-04-23 14:33:07 发布

huangbinzhang

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量750

点赞数 1

分类专栏： web前端文章标签： CSS 三角形原理

本文链接：https://blog.csdn.net/huangbinzhang/article/details/51025607

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天有个同学询问了我关于使用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;
	}

图形：

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

huangbinzhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS绘制三角形

今天有个同学询问了我关于使用CSS制作三角形的问题，我也没有怎么想考虑，直接给了源码。然后她询问了一系列的问题，我才意识到，这类代码网上一般都有，缺的是制作的原理，于是就有了编写博客的想法。下面我们先来看一下效果：接下来我们看一下源代码： Document div{ width: 0; height: 0; border-left: 11
复制链接

扫一扫