首页 > Web开发 > 详细

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

时间:2021-04-20 13:44:25      阅读:14      评论:0      收藏:0      [点我收藏+]

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

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

技术分享图片

 

 

// 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;
} //效果图如下:
技术分享图片

 

 // 完美

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

原文:https://www.cnblogs.com/liangwenxuan/p/14680082.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!