pseudo elements

this line goes to create some pseudo elements and use them to create shapes.

by iamanubhavsaini

HTML

<div id="protagonist"></div>

CSS

#protagonist{
    margin: 30px auto;
 width: 100px;
 height: 100px;
 background-color: red;
}
#protagonist::before{
 content:'';
 display:block;
 width: 100px;
 height:100px;
 background-color: red;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
#protagonist::after{
 content:'';
 display:block;
 width: 100px;
 height:100px;
 background-color: red;
    position: relative;
    top:-100px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    
}