html改变图片形状成梯形,html – 在纯css中制作一定的梯形形状

对于问题的第二部分,您可以创建SVG剪辑路径,然后引用css中的id.您可以在HTML底部看到SVG.

-webkit-clip-path: url(#top-path);

clip-path: url(#top-path);

但请注意,对剪辑路径的支持目前非常有限.

div {

float: left;

height: 100px;

width: 130px;

}

.holder {

position: relative;

}

.top {

width: 490px;

}

.bottom {

width: 490px;

position: absolute;

left: 0;

top: 35px;

}

.top-left {

background-color: aquamarine;

height: 35px;

}

.top-mid {

background-color: aquamarine;

width: 97px;

-webkit-clip-path: url(#top-path);

clip-path: url(#top-path);

}

.top-right {

background-color: aquamarine;

margin-top: 37px;

height: 53px;

}

.bottom-left {

background-color: aqua;

height: 34px;

}

.bottom-mid {

background-color: aqua;

width: 97px;

-webkit-clip-path: url(#bottom-path);

clip-path: url(#bottom-path);

}

.bottom-right {

background-color: aqua;

margin-top: 55px;

height: 45px;

}

SVG Clip Path Shape

对于问题的第一部分,我们可以使用剪辑路径,每个角坐标用逗号分隔.

-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

div {

float: left;

height: 100px;

width: 130px;

}

.holder {

position: relative;

}

.top {

width: 490px;

}

.bottom {

width: 490px;

position: absolute;

left: 0;

top: 43px;

}

.top-left {

background-color: aquamarine;

height: 43px;

}

.top-mid {

background-color: aquamarine;

-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);

}

.top-right {

background-color: aquamarine;

margin-top: 20px;

height: 80px;

}

.bottom-left {

background-color: aqua;

height: 43px;

}

.bottom-mid {

background-color: aqua;

-webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);

clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);

}

.bottom-right {

background-color: aqua;

margin-top: 43px;

height: 57px;

}

CSS Shape