div对角放置图片

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