使用CSS3网格（grid）实现连环漫画书风格的页面布局

Comic book style layout with CSS Grid，包含一些斜线切割元素。

css3, grid, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    max-width: 1440px;
    font-size: 0;
}
.hero-item,
.standard-item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.news-item {
    display: inline-block;
    min-height: 400px;
    width: 50%;
}
.hero-item {
    background-image: url("/uploads/161001/normal1.jpg");
}
.standard-item:nth-child(2) {
    background-image: url("/uploads/161001/normal2.jpg");
}
.standard-item:nth-child(3) {
    background-image: url("/uploads/161001/normal3.jpg");
}
.standard-item:nth-child(4) {
    background-image: url("/uploads/161001/normal4.jpg");
}
@supports (display: grid) {
    .news-item {
        width: auto;
        min-height: 0;
    }
    .hero-item {
        grid-column: 1 / span 2;
        grid-row: 1 / 50;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
    }
    .standard-item:nth-child(2) {
        grid-column: 1 / span 1;
        grid-row: 50 / 100;
        -webkit-clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
        clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
        margin-top: -73px;
    }
    .standard-item:nth-child(3) {
        grid-column: 2 / span 1;
        grid-row: 50 / 100;
        -webkit-clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
        clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
        margin-top: -73px;
        margin-left: -15%;
        margin-bottom: 18px;
    }
    .standard-item:nth-child(4) {
        grid-column: 1 / span 2;
        grid-row: 100 / 150;
        -webkit-clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
        clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
        margin-top: -107px;
    }
}

HTML

Comic book style layout with CSS Grid，包含一些斜线切割元素。

css3, grid, template

编辑器支持Emmet

快捷键

Comic book style layout with CSS Grid，包含一些斜线切割元素。

css3, grid, template

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

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：