GTA5 封面

描述

利用grid布局配合clip-path实现GTA5封面

核心点

• grid实现不规则的栅格布局
• clip-path控制每个格子的形状

代码

html

<div class="parent">
      <div class="child">
        <img
          src="https://i.pinimg.com/originals/0d/67/72/0d677237854ed19dcfe69f0f9a4065ee.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://i.pinimg.com/736x/26/db/84/26db84b2bf348f79792f7c5f0f9bd5ef.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://i.pinimg.com/736x/45/0d/1c/450d1c87ce61bc0c2429701ed3ea631a.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://i.pinimg.com/564x/94/76/dd/9476dd3d346a3d697362da94b9aa2dc2.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://www.sitedogta.com.br/gta5/imagens/personagens/Trevor%20GTA%20V.JPG"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://i.pinimg.com/564x/3b/3b/56/3b3b56745376625aa66d5943b3db0275.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://i.pinimg.com/originals/c8/9c/6b/c89c6b8f2165cfbe5ecccfebace1042d.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img
          src="https://i.pinimg.com/736x/ea/e7/b5/eae7b513060702e86bdd51d4d5cfc5ae.jpg"
          alt=""
        />
      </div>
      <div class="child">
        <img src="https://cdn.hipwallpaper.com/i/94/92/Fk0l6I.jpg" alt="" />
      </div>
    </div>

scss

  * {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  background-color: #233333;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 0;
}

.parent {
  padding: 0.8rem;
  background-color: black;
  height: 95vh;
  min-height: 500px;
  width: 100%;
  max-width: 600px;
  margin: auto;
  margin-top: 2.5vh;
  border: 1px solid #c9b473;
  overflow: hidden;
  display: grid;

  grid-template-columns: 1fr 0.7fr 0.3fr 1fr;
  grid-template-rows: 20% 40% 20% 20%;
  grid-template-areas:
    "one two two three"
    "four five five five "
    "six five five five "
    "six seven eight eight";
}

.child {
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3) {
    img {
      width: 120%;
      height: 120%;
    }
  }
  &:first-child {
    grid-area: one;
    clip-path: polygon(0% 0%, 90% 0%, 105% 110%, 0% 90%);
  }
  &:nth-child(2) {
    grid-area: two;
    clip-path: polygon(0% 0%, 110% 0%, 95% 110%, 10% 110%);
  }
  &:nth-child(3) {
    grid-area: three;
    clip-path: polygon(15% 0%, 100% 0%, 98% 90%, 2% 108%);
  }
  &:nth-child(4) {
    grid-area: four;
    clip-path: polygon(0% -1%, 105% 10%, 120% 65%, 100% 110%, 2% 125%);
    img {
      width: 135%;
      height: 135%;
    }
  }
  &:nth-child(5) {
    grid-area: five;
    clip-path: polygon(
      5% 7%,
      50% 7%,
      100% 0%,
      98% 95%,
      53% 100%,
      53% 63%,
      3% 73%,
      14% 44%
    );
  }
  &:nth-child(5) {
    grid-area: five;
  }
  &:nth-child(6) {
    grid-area: six;
    clip-path: polygon(2% 30%, 100% 15%, 98% 100%, 1% 100%);
  }
  &:nth-child(7) {
    grid-area: seven;
    clip-path: polygon(8% 30%, 95% 25%, 95% 100%, 5% 100%);
  }
  &:nth-child(8) {
    grid-area: eight;
    clip-path: polygon(2% 22%, 100% 0%, 100% 100%, 2% 100%);
  }
  &:nth-child(9) {
    grid-row: 3/4;
    grid-column: 2/4;
    clip-path: polygon(6% 30%, 100% -1%, 100% 110%, 5% 125%);
    img {
      object-position: 30% 50%;
      height: 135%;
    }
  }
}

效果图