html 带边框的梯形,css clip-path画带边框梯形多边形

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