【前端】CSS绘制三角形、梯形

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;
        }