css clip-path画带边框梯形多边形

项目案例一(自适应梯形)

项目案例二(渐变色多边形)

项目案例一(自适应梯形)

如下梯形区域为模块的title信息，要求title文字个数变化时梯形区域随之变化

实现方法：

两个div嵌套，外层div加背景色，然后使用polygon()多边形函数来指定一个梯形

内层div指定梯形时坐标点与外层相差一个像素，达到边框效果(直接对外层div加border只会有上下border,左右两边border因被裁切而看不见)

html代码：

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{

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

}