HTML
<div class="heart">
<div class="h">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
<div class="h4"></div>
<div class="h5"></div>
<div class="h6"></div>
<div class="h7"></div>
<div class="h8"></div>
<div class="h9"></div>
</div>
</div>
<div class="css">
<div class="c">
<div class="cleft"></div>
<div class="ctop"></div>
<div class="ctopCurl"></div>
<div class="cbottom"></div>
<div class="cbottomCurl"></div>
</div>
<div class="s">
<div class="stop"></div>
<div class="stopCurl"></div>
<div class="sleft"></div>
<div class="scenter"></div>
<div class="sright"></div>
<div class="sbottom"></div>
<div class="sbottomCurl"></div>
</div>
<div class="s">
<div class="stop"></div>
<div class="stopCurl"></div>
<div class="sleft"></div>
<div class="scenter"></div>
<div class="sright"></div>
<div class="sbottom"></div>
<div class="sbottomCurl"></div>
</div>
</div>
<div class="grids">
<div class="g">
<div class="gleft"></div>
<div class="gtop"></div>
<div class="gtopCurl"></div>
<div class="gbottom"></div>
<div class="gright"></div>
<div class="gcenter"></div>
</div>
<div class="r">
<div class="rleft"></div>
<div class="rtop"></div>
<div class="rright"></div>
<div class="rcenter"></div>
<div class="rd1"></div>
<div class="rd2"></div>
<div class="rd3"></div>
</div>
<div class="i">
<div class="ileft"></div>
</div>
<div class="d">
<div class="dleft"></div>
<div class="dtop"></div>
<div class="dright"></div>
<div class="dbottom"></div>
</div>
<div class="s">
<div class="stop"></div>
<div class="stopCurl"></div>
<div class="sleft"></div>
<div class="scenter"></div>
<div class="sright"></div>
<div class="sbottom"></div>
<div class="sbottomCurl"></div>
</div>
</div>
SCSS
$block: 15px;
$c : #222;
body {
background-color: azure;
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: $block * 35;
justify-content: center;
align-items: center;
> div {
margin-bottom: $block;
}
}
.css, .grids {
> div {
> div {
background-color: $c;
// border: 1px solid $c;
}
}
}
.heart > div > div {
background-color: red;
}
.heart {
.h {
$col: 9;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
". h2 h3 . . . h7 h8 . "
"h1 h2 h3 h4 . h6 h7 h8 h9"
"h1 h2 h3 h4 h5 h6 h7 h8 h9 "
". h2 h3 h4 h5 h6 h7 h8 . "
". . h3 h4 h5 h6 h7 . . "
". . . h4 h5 h6 . . . "
". . . . h5 . . . . "
;
@for $i from 1 through 9 {
.h#{$i} {
grid-area: h#{$i};
}
}
}
}
.css{
text-align: center;
}
.c {
margin-right: $block;
$col: 5;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
". ct ct ct . "
"cl . . . ctc"
"cl . . . . "
"cl . . . . "
"cl . . . . "
"cl . . . cbc"
". cb cb cb ."
;
.cleft {
grid-area: cl;
}
.ctop {
grid-area: ct;
}
.ctopCurl {
grid-area: ctc;
}
.cbottom {
grid-area: cb;
}
.cbottomCurl {
grid-area: cbc;
}
}
.s {
margin-right: $block;
$col: 5;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
". st st st . "
"sl . . . stc"
"sl . . . . "
"sl sc sc sc sr "
". . . . sr "
"sbc . . . sr "
". sb sb sb ."
;
.stop {
grid-area: st;
}
.stopCurl {
grid-area: stc;
}
.sleft {
grid-area: sl;
}
.scenter {
grid-area: sc;
}
.sright {
grid-area: sr;
}
.sbottom {
grid-area: sb;
}
.sbottomCurl {
grid-area: sbc;
}
}
.grids {
div {
vertical-align: middle;
}
text-align: center;
.g {
margin-right: $block;
$col: 5;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
". gt gt gt . "
"gl . . . gtc"
"gl . . . . "
"gl . gc gc gr "
"gl . . . gr "
"gl . . . gr "
". gb gb gb ."
;
.gleft {
grid-area: gl;
}
.gtop {
grid-area: gt;
}
.gtopCurl {
grid-area: gtc;
}
.gbottom {
grid-area: gb;
}
.gright {
grid-area: gr;
}
.gcenter {
grid-area: gc;
}
}
.r {
margin-right: $block;
$col: 5;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
"rl rt rt rt . "
"rl . . . rr "
"rl . . . rr "
"rl rc rc rc . "
"rl . rd1 . . "
"rl . . rd2 . "
"rl . . . rd3"
;
.rleft {
grid-area: rl;
}
.rtop {
grid-area: rt;
}
.rright {
grid-area:rr;
}
.rcenter {
grid-area: rc;
}
.rd1 {
grid-area: rd1;
}
.rd2 {
grid-area: rd2;
}
.rd3 {
grid-area: rd3;
}
}
.d {
margin-right: $block;
$col: 5;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
"dt dt dt dt . "
"dl . . . dr "
"dl . . . dr "
"dl . gc gc dr "
"dl . . . dr "
"dl . . . dr "
"db db db db ."
;
.dleft {
grid-area: dl;
}
.dtop {
grid-area: dt;
}
.dbottom {
grid-area: db;
}
.dright {
grid-area: dr;
}
}
.i {
margin-right: $block;
$col: 1;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
"il"
"il"
"il"
"il"
"il"
"il"
"il"
;
.ileft {
grid-area: il;
}
}
.s {
margin-right: $block;
$col: 5;
$row: 7;
display: inline-grid;
grid-template-columns: repeat($col, $block);
grid-template-rows: repeat($row, $block);
width: $col * $block;
height: $row * $block;
grid-template-areas:
". st st st . "
"sl . . . stc"
"sl . . . . "
"sl sc sc sc sr "
". . . . sr "
"sbc . . . sr "
". sb sb sb ."
;
.stop {
grid-area: st;
}
.stopCurl {
grid-area: stc;
}
.sleft {
grid-area: sl;
}
.scenter {
grid-area: sc;
}
.sright {
grid-area: sr;
}
.sbottom {
grid-area: sb;
}
.sbottomCurl {
grid-area: sbc;
}
}
}
