HTML
<div class="background">
<div class="container">
<div class="brick">
<div class='side1'></div>
<div class='side2'></div>
<div class='side3-bin'>
<div class='side3'></div>
</div>
<div class="stud1"></div>
<div class="stud2"></div>
<div class="stud3"></div>
<div class="stud4"></div>
<div class="stud5"></div>
<div class="stud6"></div>
<div class="stud7"></div>
<div class="stud8"></div>
</div>
</div>
</div>
CSS
.background {
background: linear-gradient(135deg, #c629ce 0%,#474677 50%,#ffffff 50%,#ffffff 100%);
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.brick {
position: relative;
height: 300px;
width: 400px;
border-radius: 30px;
background: #FFFFFF;
box-shadow: 2px 6px 30px 0 rgba(0,0,0,0.4);
border: 4px solid #333;
}
.side1 {
position: absolute;
top: 140px;
left: 160px;
height: 68px;
width: 180px;
background: #814998;
transform: skewY(-30deg);
}
.side2 {
position: absolute;
top: 166px;
left: 70px;
height: 68px;
width: 90px;
background: #9b59b6;
transform: skewY(30deg);
}
.side3 {
position: absolute;
top: 9px;
left: 13px;
height: 105px;
width: 180px;
background: #a565bf;
transform: skewY(30deg);
}
.side3-bin {
transform: rotate(-60deg);
}
.stud1 {
position: absolute;
top: 115px;
left: 95px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud1:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud2 {
position: absolute;
top: 141px;
left: 141px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud2:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud3 {
position: absolute;
top: 90px;
left: 141px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud3:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud4 {
position: absolute;
top: 115px;
left: 187px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud4:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud5 {
position: absolute;
top: 65px;
left: 187px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud5:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud6 {
position: absolute;
top: 89px;
left: 233px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud6:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud7 {
position: absolute;
top: 37px;
left: 233px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud7:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
.stud8 {
position: absolute;
top: 63px;
left: 279px;
width: 36px;
height: 30px;
background: #8847a2;
margin-top: 6px;
border-radius: 18px / 10px;
}
.stud8:before {
content: "";
position: absolute;
height: 20px;
width: 36px;
border-radius: 18px / 10px;
background: #9b59b6;
}
