本文已参与掘金创作者训练营第三期「高产更文」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

第一步：画一个带边框 div

div {
   width: 100px;
   height: 100px;
   border: 5px solid; 
   border-color: green blue red yellow;
}

效果：

第二步：将边框放大

div {
   width: 100px;
   height: 100px;
   border: 50px solid; 
   border-color: green blue red yellow;
}

效果：

第三步：取消长宽

div {
   width: 0px;
   height: 0px;
   border: 50px solid; 
   border-color: green blue red yellow;
}

效果：

第四步：隐藏边框，只保留下边框

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

效果：

第五步：优化，使"隐藏"的上边框不占据空间

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

效果：

第六步：同理实现梯形

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

效果：