css之用border-width配合border-color实现矩形对角线

.rectangle {
  border-color: yellow red green blue;
  border-width: 40px 50px 40px 50px;
} //效果图如下:

// 根据填充的颜色值来进行调整块的显示效果，大家可以在本地来回试一下

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

.rectangle {
  border-color: yellow red green blue;
  border-width: 20px 50px 0 50px;    // 将下边框的宽度设置为0后
} //效果图如下:

 // 由效果图我们可以看出，下边框设置为0后，只显示了上边框20px的区域

// 所以三角形，梯形的效果图就迎刃而解了

// 1、将矩形以对角线划分为两个三角形 ，颜色值只需要将上左统一，下右统一即可

.rectangle {
  border-color: yellow green green yellow;  
  border-width: 20px 50px 20px 50px;
} //效果图如下:

 // 2、将矩形变为最开始我们想要的效果图，只需要改变边框的宽度即可

.rectangle {
  width: 120px;
  height: 30px;
  border-color: #e5bf7e #fff #fff #e5bf7e;
  border-width: 120px 0 40px 120px;
  border-style: solid;

} //效果图如下:

 

 // 完美