HTML
<div class="canvas">
<div class="brick-wrap">
<div class="brick red">
<div class="bits">
<div class="bit">
<div class="top-gloss"></div>
<div class="front-gloss"></div>
<div class="back-shadow"></div>
<div class="slanted-gloss"></div>
<div class="slanted-shadow"></div>
</div>
<div class="bit">
<div class="top-gloss"></div>
<div class="front-gloss"></div>
<div class="back-shadow"></div>
<div class="slanted-gloss"></div>
<div class="slanted-shadow"></div>
</div>
<div class="bit">
<div class="top-gloss"></div>
<div class="front-gloss"></div>
<div class="back-shadow"></div>
<div class="slanted-gloss"></div>
<div class="slanted-shadow"></div>
</div>
<div class="bit">
<div class="top-gloss"></div>
<div class="front-gloss"></div>
<div class="back-shadow"></div>
<div class="slanted-gloss"></div>
<div class="slanted-shadow"></div>
</div>
</div>
<div class="top-gloss"></div>
</div>
<div class="brick green">
<div class="top-gloss"></div>
</div>
<div class="brick yellow">
<div class="top-gloss"></div>
</div>
<div class="brick blue">
<div class="top-gloss"></div>
</div>
<div class="brick-highlights">
<div class="dark"></div>
<div class="light"></div>
</div>
<div class="shiny">
</div>
</div>
</div>
CSS
html, body {
background: #2c3e50;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
zoom: 1;
}
.canvas {
width: 400px;
height: 300px;
background: #2c3e50;
display: block;
margin: 0 auto;
}
.brick-wrap {
position: relative;
display: block;
margin: 0 auto;
width: 124px;
padding-bottom: 8px;
top: 50px;
overflow: hidden;
}
.brick {
width: 124px;
height: 46px;
display: block;
border-radius: 2px;
margin: 0 auto;
top: 8px;
position: relative;
}
.brick.red {
background: #e74c3c;
}
.brick.red .bits {
position: absolute;
top: -8px;
}
.brick.red .bits .bit {
width: 19px;
height: 8px;
display: block;
background: #e74c3c;
position: relative;
float: left;
margin: 0 6px 0 6px;
border-radius: 2px 2px 0 0;
}
.brick.red .bits .bit .slanted-gloss {
position: absolute;
opacity: 0.34;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 19px 0 0;
border-color: #fff transparent transparent transparent;
}
.brick.red .bits .bit .slanted-shadow {
position: absolute;
bottom: 0;
opacity: 0.1;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 3px 19px;
border-color: transparent transparent #42210B transparent;
}
.brick.red .bits .bit .top-gloss {
width: 17px;
height: 1px;
background: #fff;
border-radius: 1px 1px 0 0;
opacity: 0.5;
position: relative;
margin: 0 auto;
top: 1px;
}
.brick.red .bits .bit .front-gloss {
width: 7px;
height: 7px;
background: #fff;
border-radius: 1px 1px 0 0;
opacity: 0.4;
left: 1px;
position: relative;
float: left;
}
.brick.red .bits .bit .back-shadow {
width: 7px;
height: 7px;
background: #A52929;
border-radius: 1px 1px 0 0;
opacity: 0.4;
right: 1px;
position: relative;
float: right;
}
.brick .top-gloss {
width: 122px;
height: 1px;
background: #fff;
border-radius: 1px 1px 0 0;
opacity: 0.5;
position: relative;
margin: 0 auto;
top: 1px;
}
.brick.green {
background: #27ae60;
}
.brick.yellow {
background: #f1c40f;
}
.brick.blue {
background: #2980b9;
}
.brick-highlights {
width: 124px;
position: absolute;
top: 8px;
}
.brick-highlights .dark {
width: 30px;
height: 184px;
opacity: 0.05;
background: #873722;
float: right;
border-radius: 0 2px 2px 0;
position: relative;
}
.brick-highlights .dark::before {
content: " ";
position: absolute;
left: -45px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 184px 45px;
border-color: transparent transparent #873722 transparent;
}
.brick-highlights .light {
width: 30px;
height: 184px;
opacity: 0.05;
background: #fff;
float: left;
border-radius: 0 2px 2px 0;
position: relative;
transform: rotate(180deg);
}
.brick-highlights .light::before {
content: " ";
position: absolute;
left: -45px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 184px 45px;
border-color: transparent transparent #fff transparent;
}
