css之用border-width配合border-color實現矩形對角線

先放效果圖，我們要實現的是那塊藕黃色區域，可以看出來本來是個矩形，然后下邊一塊區域為白色塊，變成了直角梯形的樣式，

所以，我們先來寫一個矩形沿對角線折疊分為兩個三角形，然后再實現效果圖中的樣式

 

 

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

} //效果圖如下:

 

 // 完美