cssclip-path画带边框梯形多边形
css clip-path画带边框梯形多边形
项⽬案例⼀（⾃适应梯形）
如下梯形区域为模块的title信息，要求title⽂字个数变化时梯形区域随之变化
实现⽅法：
两个div嵌套，外层div加背景⾊，然后使⽤polygon()多边形函数来指定⼀个梯形
内层div指定梯形时坐标点与外层相差⼀个像素，达到边框效果（直接对外层div加border只会有上下border，左右两边border因被裁切⽽看不见）
html代码：
<div class="corp-title-text">
<div class="corp-title-text2">
</div>
</div>
css代码：
.corp-title-text{
min-width: 210px;
height: 100%;
position: relative;
top: -4px;
background: #4FA6E5;
border-bottom: 1px solid #4FA6E5;
clip-path:polygon(0 0, 10px 100%,calc(100% - 10px) 100%,100% 0);
box-sizing: border-box;
}
.corp-title-text2{
padding: 0 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #082F4C;
clip-path:polygon(1px 0, 11px 100%,calc(100% - 11px) 100%,calc(100% - 1px) 0);
}
重点代码为：
clip-path:polygon(0 0, 10px 100%,calc(100% - 10px) 100%,100% 0);
如图：画梯形：
1、确定坐标原点和轴
2、1（0，0） 2（10px，100%） 3（calc(100%-10px)，100%）4（100%，0）
其中坐标点3运⽤了计算属性calc
基于此形状可以扩展画多边形
项⽬案例⼆（渐变⾊多边形）
直接上代码：
.mo-di-mqn{
borderbox
width: 179px;
height: 34px;
position: relative;
clip-path:polygon(8px 0%, 0% 8px,20px 100%,calc(100% - 20px) 100%,100% 8px,calc(100% - 8px) 0%);
background:linear-gradient(RGBA(42, 60, 115, 1),rgba(239, 0, 4, 0.4)),
repeating-linear-gradient(125deg,#D20A16,#D20A16 10px,#A30F1E 0,#A30F1E 20px);
}
.mo-di-mqn:before{
width: 25px;
height: 34px;
content: ' ';
position: absolute;
left: 0;
top: 0;
clip-path:polygon(8px 0%, 0% 8px,20px 100%,25px 100%,5px 8px,13px 0%);
background: linear-gradient(RGBA(215, 8, 18, 0.4),RGBA(215, 8, 18, 1));
}
.mo-di-mqn:after{
width: 25px;
height: 34px;
content: ' ';
position: absolute;
right: 0;
top: 0;
clip-path:polygon(calc(100% - 13px) 0%, calc(100% - 5px) 8px,0% 100%,5px 100%,100% 8px,calc(100% - 5px) 0%); background: linear-gradient(RGBA(215, 8, 18, 0.4),RGBA(215, 8, 18, 1));
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。