<main class="comic">
<div class="panelgroup-1">
<div class="panel-1">
<img src='https://images.unsplash.com/photo-1455145914126-c357157e2db0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-2">
<img src='https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-3">
<img src='https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-4">
<img src='https://images.unsplash.com/photo-1507984211203-76701d7bb120?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-5">
<img src='https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-6">
<img src='https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
</div>
<div class="panelgroup-2">
<div class="panel-7">
<img src='https://images.unsplash.com/photo-1542736143-29a8432162bc?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-8">
<img src='https://images.unsplash.com/photo-1508927415581-538b97647924?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-9">
<img src='https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-10">
<img src='https://images.unsplash.com/photo-1531425300797-d5dc8b021c84?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-11">
<img src='https://images.unsplash.com/photo-1447969025943-8219c41ea47a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-12">
<img src='https://images.unsplash.com/photo-1502083896352-259ab9e342d7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
</div>
<div class="panel-13"></div>
</div>
</main>
<a class="collection" href="https://codepen.io/collection/DjwRaP/" target="_blank">comic layout collection</a>
.comic {
display: grid;
grid-template-rows: 0.35fr 0.35fr 0.3fr;
margin: 0 auto;
}
[class^=panel-] {
background-color: #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.panelgroup-1 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-row: 1 / span 2;
grid-column: 1;
}
.panel-1 {
grid-row: 1;
grid-column: 1 / span 2;
clip-path: polygon(0 0, 50% 0, 60.00% 100.00%, 0 100%);
img {
clip-path: polygon(0 0, 48% 0, 57% 100%, 0 100%);
}
}
.panel-2 {
grid-row: 1;
grid-column: 2 / span 2;
clip-path: polygon(0 0, 50% 0, 58% 100%, 10% 100%);
z-index: 1;
img {
clip-path: polygon(0 0, 48.5% 0, 56% 100%, 10% 100%);
}
}
.panel-3 {
grid-row: 1;
grid-column: 3;
img {
clip-path: polygon(0 0, 97% 0, 66% 100%, 0 100%);
}
}
.panel-4 {
grid-row: 1;
grid-column: 3 / 5;
clip-path: polygon(101px 0, 200px 0, 200px 493px, 71px 493px);
img {
clip-path: polygon(101px 0, 192px 0, 145px 494px, 71px 493px);
}
}
.panel-5 {
grid-row: 1;
grid-column: 4 / -1;
clip-path: polygon(48% 0, 100% 0, 100% 100%, 25% 100%);
}
.panel-6 {
grid-row: 1;
grid-column: 5;
clip-path: polygon(100% 37%, 100% 100%, 16% 100%);
}
.panelgroup-2 {
display: grid;
grid-template-columns: repeat(2, 1fr) 1.4fr 0.8fr 1fr 1.7fr;
grid-template-rows: 2.5fr repeat(2, 1fr) 1.6fr;
grid-row: 2 / span 2;
grid-column: 1;
z-index: 3;
}
.panel-7 {
grid-row: 1 / -1;
grid-column: 1 / -1;
clip-path: ellipse(360px 370px at 340px 372px);
img {
clip-path: ellipse(354px 364px at 340px 372px);
}
}
.panel-8 {
grid-row: 1 / -1;
grid-column: 2 / -1;
clip-path: ellipse(271px 279px at 273px 410px);
img {
clip-path: ellipse(267px 275px at 273px 410px);
}
}
.panel-9 {
grid-row: 2 / -1;
grid-column: 3 / -1;
clip-path: ellipse(250px 213px at 251px 215px);
img {
clip-path: ellipse(246px 209px at 251px 215px);
}
}
.panel-10 {
grid-row: 3 / -1;
grid-column: 4 / -1;
clip-path: ellipse(176px 159px at 177px 161px);
img {
clip-path: ellipse(172px 155px at 177px 161px);
}
}
.panel-11 {
grid-row: 4 / -1;
grid-column: 5 / -1;
clip-path: ellipse(112px 92px at 114px 96px);
img {
clip-path: ellipse(108px 88px at 114px 96px);
}
}
.panel-12 {
grid-row: 4 / -1;
grid-column: 6 / -1;
clip-path: circle(80px at 82px 100px);
img {
clip-path: circle(76px at 82px 100px);
}
}
.panel-13 {
grid-row: 4 / -1;
grid-column: 6 / -1;
clip-path: circle(61px at 109px 106px);
background-color: white;
}
// Themeing
body {
background-color: #333745;
display: grid;
place-items: start center;
grid-template-rows: max-content auto;
gap: 1rem;
height: 100vh;
}
.comic {
width: 500px;
height: 705px;
padding: 1rem;
margin: 2rem 0;
background-color: #fff;
box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
}
.collection {
position: absolute;
display: block;
padding: 0.5rem 1rem;
border: 1px solid #F07739;
left: 10px;
top: 10px;
color: #F07739;
text-decoration: none;
font-weight: 700;
&:hover {
background-color: #F07739;
color: #333745;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.