CSS绘制一个三角形

墨蓝 2023-01-04 11:49 192阅读 0赞

**目录**

等腰梯形

普通三角形（等腰三角形）

等边三角形

平行四边形

--------------------

我们先来看这样一个图形，为什么呢？因为绘制梯形、三角形或者平行四边形就是在这个基础上绘制的！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>创建三角形</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box{
    				width: 100px;
    				height: 100px;
    				
    				border: 100px solid red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box"></div>
    	</body>
    </html>

### 等腰梯形 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>创建三角形</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box{
    				width: 100px;
    				height: 100px;
    				
    				border: 100px solid;
    				
    				border-top-color: transparent;
    				border-right-color: transparent;
    				border-bottom-color: transparent;
    				border-left-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

### 普通三角形（等腰三角形） ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>实现三角形</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box{
    				width: 0px;
    				height: 0px;
    				
    				border: 100px solid;
    				
    				border-top-color: red;
    				border-right-color: transparent;
    				border-bottom-color: transparent;
    				border-left-color: transparent;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

### 等边三角形 ###

我们知道等边三角形，高是边长的一半的sqrt(3)倍，所以如果边长的一半为50的话，高度差不多就是86.6，又因为边长的一半就是左边框的厚度，高度就是上边框的厚度，所以等边三角形的代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>创建三角形</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box{
    				width: 0px;
    				height: 0px;
    				
    				border-top: 86.6px solid;
    				border-left: 50px solid;
    				border-right: 50px solid;
    				
    				border-top-color: red;
    				border-right-color: transparent;
    				border-bottom-color: transparent;
    				border-left-color: transparent;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][]

### 平行四边形 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4][]

解题思路：由创建三角形我们得知这是上边框和右边框，一个平行四边形是不是只要再拿它的中心对称图形就可以了？所以平行四边形的代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>创建平行四边形</title>
    		<style>
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.box1{
    				width: 0px;
    				height: 0px;
    				
    				float: left;
    				
    				border: 100px solid;
    				
    				border-top-color: red;
    				border-right-color: red;
    				border-bottom-color: transparent;
    				border-left-color: transparent;
    			}
    			.box2{
    				width: 0px;
    				height: 0px;
    				
    				float: left;
    				
    				border: 100px solid;
    				
    				border-top-color: transparent;
    				border-right-color: transparent;
    				border-bottom-color: red;
    				border-left-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1"></div>
    		<div class="box2"></div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5][]

绘制什么直角梯形之类的，是不是一个道理？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221119/a738169a3c464311a0aeee37f4d3fe40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021031318354451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021031318372552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210109181010461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210109181400517.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210109182551289.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng==,size_16,color_FFFFFF,t_70