html多边形坐标,html – 如何创建多边形形状div

一种方法可以是将图像分成两个容器,这两个容器的大小是父级的50％,分别转换每个容器并将背景定位为看起来像是单个图像.变换可以是倾斜(在答案中使用)或基于透视的旋转.

请注意,由于我们正在转换容器,因此我们必须将反向效果应用于实际图像,以使其看起来正常.

.image {

position: relative;

height: 150px;

width: 450px;

overflow: hidden;

}

.top-container,.bottom-container {

position: absolute;

left: 0px;

height: 50%;

width: 100%;

overflow: hidden;

backface-visibility: hidden;

}

.top-container {

top: 0px;

transform-origin: right bottom;

transform: skew(-20deg);

}

.bottom-container {

bottom: 0px;

transform-origin: right top;

transform: skew(20deg);

background-position: 0% 100%;

}

.top-container:after,.bottom-container:after {

position: absolute;

content: '';

height: 100%;

width: 100%;

left: -14px; /* tan(20) * (height/2) / 2 */

background: url(http://lorempixel.com/450/150);

background-size: 100% 200%;

}

.top-container:after {

top: 0px;

transform: skew(20deg);

}

.bottom-container:after {

bottom: 0px;

transform: skew(-20deg);

background-position: 0% 100%;

}

/* Just for demo */

body {

background: linear-gradient(90deg,crimson,indianred,purple);

}

.image2 {

margin-top: 10px;

height: 150px;

width: 450px;

background: url(http://lorempixel.com/450/150);

}

Original Image

我打算建议使用SVG和clipPath,但由于Persijn已经发布了该样本,我在下面添加了一个不同版本的多边形.

.vector {

position: relative;

height: 150px;

width: 450px;

}

svg {

position: absolute;

top: 0px;

left: 0px;

height: 100%;

width: 100%;

}

polygon {

fill: url(#image);

}

/* Just for demo */

body {

background: linear-gradient(90deg,purple);

}