CSS画图

一. 梯形

1.1 画一个正方形（边长100px）边框，边框宽度为10px

width: 100px;
height: 100px;
border: 10px solid red;

效果图：

这里的border平均分配如下图所示：

1.2 画出梯形

1.2.1 思路一

将其余三条边隐藏即可

			简洁写法
			width: 100px;
			height: 100px;
			border: 10px solid transparent;
			border-top-color: red;

		节省空间写法  ！！！不写bottom！！！  推荐
			width: 100px;
			height: 100px;
			border-top: 10px solid red;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;

1.2.2 思路二

			width: 100px;
			height: 0;
			border-top: 100px solid red;
			border-right: 40px solid transparent;

倒直角梯形

二. 三角形

根据梯形的原理，把width设置为0即可

**设置不同三角形的原理：**border 设置的都是三角形的高，对于下图而言border-top是三角形的高 border-left和border-right组成三角形的底边 根据三角形的底边与高的长度，这样就可以随意设置

2.1 等腰直角三角形

			width: 0;
			width: 0;
			border-top: 100px solid red;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;

2.2 等边三角形

			width: 0;
			width: 0;
			border-top: 173px solid red;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;

2.3 底边和高相同的等腰三角形

如下图所示

			width: 0;
			width: 0;
			border-top: 200px solid red;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;

三. 平行四边形

		    width: 150px;
		    height: 100px;
		    margin-left: 100px;
		    transform: skew(-30deg);
		    background: #000;

平行四边形的高是100px