css实现不规则图片布局效果-html代码-BFW代码库

css实现不规则图片布局效果

代码语言：html

代码描述：css实现不规则图片布局效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}

.row {
  padding: 0.75vw;
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  grid-template-rows: 55vh 30vh;
  grid-row-gap: 0.75vw;
}

.box a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.box a:hover img {
  opacity: 0.75;
}

.box__inner {
  background-color: #005696;
  width: 100%;
  height: 100%;
  position: relative;
}
.box__inner img {
  width: 100%;
  height: 100%;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

.box--left {
  -webkit-clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
          clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
  grid-row: 1;
  grid-column: 1 / span 35;
}

.box--right {
  -webkit-clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
          clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
  grid-row: 1;
  grid-column: span 35 / -1;
}

.box--small {
  grid-row: 2;
}
.box--small.box--left {
  -webkit-clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
          clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
}
.box--small.box--right {
  -webkit-clip-path: polygon(2% 0, 100% 0, 100% 100%, 17% 100%);
     .........完整代码请登录后点击上方下载按钮下载查看