html中的梯形的背景图片,如何用CSS做一个带网格背景的梯形？

如果不能用楼上的clip-path，那换个思路，左右加个平行四边形的方式(用transform: skewX(15deg))

做了整个顶部的demo，你试下(特殊边框自己再调哈)

body{

margin: auto;

}

.title-box {

display: flex;

justify-content: space-between;

align-items: center;

width: 100%;

height: 75px;

position: relative;

color: #fff;

padding-bottom: 10px;

background-color: pink;

overflow: hidden;

}

.title-box >div{

height: 100%;

background: #0F2F5B;

background-image:

linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0),

linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 0);

background-size: 10px 10px;

}

.title-box::before, .title-box::after{

content: '';

z-index: 99;

position: absolute;

top: 0;

width: 15px;

height: 75px;

background-color: pink;

border: 1px solid #fff;

border-width: 0 1px;

}

.title-box::before{

left: 30%;

margin-left: -16px; /*宽度15 加 右边框1px*/

transform: skewX(15deg);

transform-origin: right bottom;

}

.title-box::after{

right: 30%;

margin-right: -16px; /* 宽度15 加 左边框1px*/

transform: skewX(-15deg);

transform-origin: left bottom;

}

.center{

text-align: center;

width: 40%;

border-bottom: 1px solid #fff;

}

.left, .right{

position: relative;

width: 30%;

}

.left {

text-align: left;

}

.right{

text-align: right;

}

.left::after, .right::after{

content: '';

display: block;

position: absolute;

bottom: 0;

width: 100%;

height: 15px;

background-color: pink;

border-top: 1px solid #fff;

z-index: 999;

}

.left::after{

left: -17px; /* 宽度15 加上左右边框各1px */

transform: skewX(15deg);

}

.right::after{

right: -17px; /* 宽度15 加上左右边框各1px */

transform: skewX(-15deg);

}

左边

中间

右边