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