CSS实现直角梯形

爱被打了一巴掌 2022-12-31 06:26 232阅读 0赞

**献上效果图：**  
![在这里插入图片描述][20201228214534409.png]  
**代码**

**CSS：**

.box {
    	width: 300px;
    	height: 0;
    	border-width: 0px 150px 150px 0px;
    	border-style: none solid solid;
    	border-color: transparent transparent rgba(255, 0, 0, 1);
    }

**解析：**  
1、放置一个div并为其加上border  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70]  
**div：**

**CSS**

.box {
    	width: 300px;
    	height: 300px;
    	border-width: 10px 10px 10px 10px;
    	border-style: solid solid solid solid;
    	border-color: deepskyblue green red blueviolet;
    }

2、任取选一border（在此我选择底部边框），

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 1]  
上边框并不需要，修改  
宽度为0px：`border-width: 0px 10px 10px 10px;`  
样式none：`border-style: none solid solid solid;`  
颜色透明：`border-color: transparent green red blueviolet;`  
现在效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 2]  
3、右边框不需要显示，但需要占位以做出直角梯形的斜边  
修改CSS样式：`border-color: transparent transparent red blueviolet;`  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 3]  
4、左边框不需要显示、占位：

修改样式：  
边框宽度为0：`border-width: 0px 10px 10px 0;`  
边样式去掉：`border-style: none solid solid;`  
背景去掉：`border-color: transparent transparent red;`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 4]  
5、最后调整box高度为0，调整边框宽度

border-width: 0px 150px 150px 0;
    border-style: none solid solid;

效果图：  
![在这里插入图片描述][20201228223349318.png]

[20201228214534409.png]: /images/20221120/a14d803900944acc8dd3d1524756520e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70]: /images/20221120/9551635c09fb4183ac7c1f727e5cd550.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/d813c8cf1fdd4af59097abf2b842305f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221120/17fbac54d5d14b61997f2e3d4d2121ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221120/e0823106aa854d0080fb69f5e0d366e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk0ODk5Ng_size_16_color_FFFFFF_t_70 4]: /images/20221120/a0150ccf99794e45b85d31f4a1c649d0.png
[20201228223349318.png]: /images/20221120/663deeb0356a4e43a3cfda74f7cc2ef1.png