html
<div className='across'>
<div className='img' >
<div style={{ backgroundImage: 'url(图片地址)' }}></div>
</div>
<div className='img' style={{ backgroundImage: 'url(图片地址)' }}>
<div style={{ backgroundImage: `url(${src1})` }}></div>
</div>
</div>
复制代码
scss
.across {
width: 100%;
height: 100%;
overflow: hidden;
.img {
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
div {
height: 100%;
background-position: center center;
background-size: cover;
}
&:first-child {
transform: translateX(-50%) skewX(-55deg);
div {
transform: translateX(50%) skewX(55deg);//图片归位
}
}
&:last-child {
position: relative;
bottom: calc(100% + 2px);
left: 0;
transform: translateX(50%) skewX(-55deg);
div {
transform: translateX(-50%) skewX(55deg);
}
}
}
}
复制代码
转载于:https://juejin.im/post/5c3d4bd0f265da61193c0e32