<div id="prm">
<div class="l c"></div>
<div class="r c"></div>
<div class="b c"></div>
</div>
body {
background: #0b2429;
}
#prm {
position: absolute;
width: 150px;
left: 50%;
top: 50%;
height: 175px;
transform: translate(-50%, -50%);
}
.c {
width: 70px;
height: 70px;
position: absolute;
}
.l {
background: #998235;
left: 0;
transform: skewY(-45deg);
}
.r {
background: #1a4341;
right: 10px;
transform: skewY(45deg);
}
.b {
background: #f3ac3c;
bottom: 20px;
width: 100px;
height: 100px;
transform: rotate(45deg);
left: 20px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.