CSS网格布局（Grid）实现的非规则时尚杂志图片纪念册封面

非规则形状的时尚杂志图片布局

css, grid, photo, album

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2409
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/*** Fonts ***/

@import url("https://fonts.googleapis.com/css?family=Bangers");
/*** Box Reset ***/

* {
    box-sizing: border-box;
}
body {
    background-color: #e3e3e3;
}
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: 1em;
    max-width: 1440px;
    margin: 0 auto;
}
.item {
    display: inline-block;
    min-height: 400px;
    width: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*** Images With Color Fallbacks ***/

.item:nth-child(1) {
    background-color: #e74c3c;
    background-image: url(/uploads/161001/normal1.jpg);
    background-position: center top;
}
.item:nth-child(2) {
    background-color: #3498db;
    background-image: url(/uploads/161001/normal2.jpg);
    background-position: center 35%;
}
.item:nth-child(3) {
    background-color: #bdc3c7;
    background-image: url(/uploads/161001/normal3.jpg);
    background-position: center 20%;
}
.item:nth-child(4) {
    background-color: #2c3e50;
    background-image: url(/uploads/161001/normal4.jpg);
}
.item:nth-child(5) {
    background-color: #2c3e50;
    background-image: url(/uploads/161001/normal1.jpg);
    background-position: center 20px;
}
.item:nth-child(6) {
    background-color: #27ae60;
    background-image: url(/uploads/161001/normal2.jpg);
    background-position: 50% 25%;
}
.item:nth-child(7) {
    background-color: #f1c40f;
    background-image: url(/uploads/161001/normal3.jpg);
    background-position: left 27%;
}
.item:nth-child(8) {
    background-color: #2980b9;
    background-image: url(/uploads/161001/normal4.jpg);
    background-position: center 22%;
}
/*** Grid Set Up ***/

@supports (display: grid) {
    .item {
        width: auto;
        min-height: 0;
    }
    .item:nth-child(1) {
        grid-column: 1 / span 1;
        grid-row: 1 / 20;
        -webkit-clip-path: polygon(0 0, 80% 0, 100% 76.5%, 0 100%);
        clip-path: polygon(0 0, 80% 0, 100% 76.5%, 0 100%);
        margin-bottom: -93px;
    }
    .item:nth-child(2) {
        grid-column: 2 / span 1;
        grid-row: 1 / 20;
        -webkit-clip-path: polygon(0 0, 100% 0, 75% 80%, 15.5% 100%);
        clip-path: polygon(0 0, 100% 0, 75% 80%, 15.5% 100%);
        margin-left: -21%;
        margin-right: -5%;
    }
    .item:nth-child(3) {
        grid-column: 3 / span 1;
        grid-row: 1 / 20;
        -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 53%);
        clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 53%);
        margin-left: -28%;
        margin-bottom: -150px;
    }
    .item:nth-child(4) {
        grid-column: 1 / span 1;
        grid-row: 20 / 40;
        -webkit-clip-path: polygon(0 22.5%, 100% 0, 100% 77.5%, 0 100%);
        clip-path: polygon(0 22.5%, 100% 0, 100% 77.5%, 0 100%);
        margin-top: -5px;
        margin-bottom: -93px;
    }
    .item:nth-child(5) {
        grid-column: 2 / span 1;
        grid-row: 20 / 40;
        -webkit-clip-path: polygon(0 13%, 74% 0, 100% 9.25%, 100% 100%, 0 100%);
        clip-path: polygon(0 13%, 74% 0, 100% 9.25%, 100% 82%, 65% 100%, 0 82%);
        margin-top: -67px;
        margin-left: -1%;
        margin-bottom: -86px;
    }
    .item:nth-child(6) {
        grid-column: 3 / span 1;
        grid-row: 20 / 40;
        -webkit-clip-path: polygon(0 0, 100% 34.5%, 100% 100%, 0 68.5%);
        clip-path: polygon(0 0, 100% 34.5%, 100% 100%, 0 68.5%);
        margin-left: -1%;
        margin-top: -20px;
        margin-bottom: -150px;
    }
    .item:nth-child(7) {
        grid-column: 1 / 3;
        grid-row: 40 / 60;
        -webkit-clip-path: polygon(0 30%, 49% 0, 75% 38%, 34% 100%, 0 100%);
        clip-path: polygon(0 30%, 49% 0, 82% 27%, 34% 100%, 0 100%);
        margin-top: -7px;
    }
    .item:nth-child(8) {
        grid-column: 2 / span 2;
        grid-row: 40 / 60;
        -webkit-clip-path: polygon(0 100%, 57% 0, 100% 48%, 100% 100%, 0 100%);
        clip-path: polygon(0 100%, 57% 0, 100% 48%, 100% 100%, 0 100%);
        margin-left: -15%;
        margin-top: -7px;
    }
}
/*** Floating Text ***/

.text-box {
    position: absolute;
    top: 560px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
.text {
    display: block;
    text-align: center;
    color: whitesmoke;
    text-shadow: 0px 3px 15px #000;
    font-family: 'Bangers', cursive;
    font-size: 3.5vmax;
}
body {
    margin: 0;
}

HTML

非规则形状的时尚杂志图片布局

css, grid, photo, album

编辑器支持Emmet

快捷键

非规则形状的时尚杂志图片布局

css, grid, photo, album

使用CSS网格grid布局实现的仿github贡献值表格界面

CSS3网格（grid）布局幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：