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

2021-07-31 07:02:17

先放效果图，我们要实现的是那块藕黄色区域，可以看出来本来是个矩形，然后下边一块区域为白色块，变成了直角梯形的样式，

所以，我们先来写一个矩形沿对角线折叠分为两个三角形，然后再实现效果图中的样式

// html
<div class="rectangle"></div>

首先我们先了解border-color和border-width这两个css属性

border-color是设置上右下左的颜色，根据颜色值来填充对应的块，有四个值

border-width是设置上右下左的边框的宽度，有四个值

先写个栗子：

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

} //效果图如下:

// 完美

码农公寓