div+css实现响应式漫画网格布局效果代码-html代码-BFW代码库

div+css实现响应式漫画网格布局效果代码

代码语言：html

所属分类：响应式

代码描述：div+css实现响应式漫画网格布局效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #222;
}

body * {
        box-sizing: border-box;
}

*:before,
*:after {
        content: "";
        position: absolute;
        box-sizing: border-box;
}

.wrapper {
        display: grid;
        grid-gap: 1.1vmin;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 1fr;
        width: calc(100% - 2vmin);
        height: calc(100% - 4vmin);
        margin: 2vmin;
}

/*** items ***/
.item {
        width: auto;
        min-height: 0;
        position: relative;
}

.item:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1 / 20;
        clip-path: polygon(0 0, 80% 0, 73% 82%, 0 95%);
        background: #ff4a4a;
}

.item:nth-child(2) {
        grid-column: 2 / span 2;
        grid-row: 1 / 20;
        clip-path: polygon(32% 0, 100% 0, 100% 68%, 25% 81%);
        background: #f7941d;
}

.item:nth-child(3) {
        grid-column: 1 / span 1;
        grid-row: 17 / 50;
        clip-path: polygon(0 8%, 0% 87%, 87% 88%, 98% 3%);
        background: #ffde14;
}

.item:nth-child(4) {
        grid-column: 2 / span 1;
        grid-row: 15 / 47;
        clip-path: polygon(14% 9.5%, 4% 97.5%, 99% 99%, 99% 4.5%);
        margin-left: -15%;
        background: #8ec63f;
}

.item:nth-child(5) {
        grid-column: 3 / span 1;
        grid-row: 13 / 48;
        clip-path: polygon(15% 9.5%, 15% 96.25%, 100% 97.5%, 100% 5%);
        margin-left: -15%;
        background: #27aae2;
}

.item:nth-child(6.........完整代码请登录后点击上方下载按钮下载查看