CSS 如何用border绘制三角形、等腰梯形、直角梯形

border 有宽度后，四角交接处会产生斜线，可根据此原理绘制三角形、等腰梯形、直角梯形等图形。

div {width: 50px;height: 50px;border-width: 50px;border-style: solid;/* border-color: 上 右 下 左; */border-color: pink green blue gold;}

border 绘制三角形 （将div中内容设置为0即宽高为0，可出现4个不同方向三角形）

div {width: 0;height: 0;border-width: 100px;border-style: solid;/* border-color: 上 右 下 左; */border-color: pink green blue gold;}

根据所需，将其他三个边框隐藏即可得到以下三角形

div {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent transparent blue transparent;}

border 绘制等腰梯形 （在绘制好三角形后如上图，将div内容的宽度设置一下，可得到一个等腰梯形，如对梯形宽度有需求，需注意内容的宽度与边框宽度）

div {width: 100px;height: 0;border-width: 0 50px 100px 50px;border-style: solid;border-color: red transparent blue transparent;}

border 绘制直角梯形 （去掉上边框和左边框宽度，添加内容宽度，即可得到直角梯形）

div {width: 150px;height: 0;border-width: 0 50px 100px 0;border-style: solid;border-color: transparent transparent red transparent;}