*{
    margin:20px;
}
span{
    display: inline-block;
}
#circle{
    width:120px;
    height:120px;
    background: #7fee1d;
    border-radius: 60px;
}
#oval{
    width:200px;
    height:100px;
    background: #e9337c;
    border-radius: 100px/50px;
}
#triangle{
    width:0;
    height:0;
    border-bottom:140px solid #fcf921;
    border-left:70px solid transparent;
    border-right:70px solid transparent;
}
#inverted-triangle{
    width:0;
    height:0;
    border-top:140px solid #20a3bf;
    border-left:70px solid transparent;
    border-right:70px solid transparent;
}
#triangle-left{
    width:0;
    height:0;
    border-right:140px solid #6bbf20;
    border-top:70px solid transparent;
    border-bottom:70px solid transparent;
}
#triangle-right{
    width:0;
    height:0;
    border-left:140px solid #ff5a00;
    border-top:70px solid transparent;
    border-bottom:70px solid transparent;
}
.po{
    position: relative;
}
#diamond{
    width:120px;
    height:120px;
    background: #1eff00;
    transform: rotate(45deg);
    /*transform-origin: 240px 0;*/
    border: 2px solid;
    border-color: red orange green blue;
    /*margin:60px 0 10px 310px;*/
}
#diamond1{
    position: absolute;
    left:0;
    top:0;
    width:120px;
    height:120px;
    background: red;
    opacity:0.3;
}
#trapezium{
    width:120px;
    height:0;
    border-bottom:120px solid #ec3504;
    border-left:60px solid transparent;
    border-right:60px solid transparent;
}
#parallelogram{
    width:160px;
    height:100px;
    background: #8734f7;
    transform: skew(30deg);
}
#star{
     width:0;
     height:0;
     margin:50px 0;
     /*color: #fc2e5a;*/
     position: relative;
     border-right:100px solid transparent;
     border-bottom:70px solid #fc2e5a;
     border-left:100px solid transparent;
     transform: rotate(35deg);
 }
#star:before{
    height:0;
    width:0;
    position: absolute;
    display: block;
    top:-45px;
    left:-65px;
    border-bottom:80px solid #fc2e5a;
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    content: '';
    transform: rotate(-35deg);
}
#star:after{
    content: '';
    width:0;
    height:0;
    position: absolute;
    display: block;
    top:3px;
    left:-105px;
    color: #fc2e5a;
    border-right:100px solid transparent;
    border-bottom:70px solid #fc2e5a;
    border-left:100px solid transparent;
    transform: rotate(-70deg);
}
#star-six-points{
    width:0;
    height:0;
    position: absolute;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:100px solid #de34f7;
    margin:10px auto;
}
#star-six-points:after{
    content: '';
    width:0;
    height:0;
    position: absolute;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:100px solid #de34f7;
    margin:30px 0 0 -50px;
}
#pentagon{
    margin-left:180px;
    width:54px;
    position: relative;
    border-width:50px 18px 0;
    border-style:solid;
    border-color: #277bab transparent;
}
#pentagon:before{
    content: '123';
    height:0;
    width:0;
    position: absolute;
    top:-85px;
    left:-18px;
    border-width:0 45px 35px;
    border-style:solid;
    border-color: transparent transparent #277bab;
}
#hexagon{
    width:100px;
    height:55px;
    background: #fc5e5e;
    position: relative;
    margin:10px auto;
}
#hexagon:before{
    content: '';
    width:0;
    height:0;
    position: absolute;
    top:-25px;
    left:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:25px solid #fc5e5e;
}
#hexagon:after{
    content: '';
    width:0;
    height:0;
    position: absolute;
    bottom:-25px;
    left:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-top:25px solid #fc5e5e;
}
#octagon{
    width:100px;
    height:100px;
    background: #ac60ec;
    position: relative;
}
#octagon:before{
    content: '';
    width:42px;
    height:0;
    position: absolute;
    top:0;
    left:0;
    border-bottom:29px solid #ac60ec;
    border-left:29px solid white;
    border-right:29px solid white;
}
#octagon:after{
    content: '';
    width:42px;
    height:0;
    position: absolute;
    bottom:0;
    left:0;
    border-top:29px solid #ac60ec;
    border-left:29px solid  white;
    border-right:29px solid white;
}
#heart{
    position: relative;
}
#heart:before,#heart:after{
    content: '';
    width:70px;
    height:115px;
    position: absolute;
    background: red;
    left:70px;
    top:0;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
#heart:after{
    left:0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
#egg{
    margin-left:100px;
    width:136px;
    height:190px;
    background: #ffc000;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
#infinity{
    width:220px;
    height:100px;
    position: relative;
}
#infinity:before,#infinity:after{
    content: '';
    width:60px;
    height:60px;
    position: absolute;
    left:0;
    top:0;
    border:20px solid #06c999;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
}
#infinity:after{
    left: auto;
    right:0;
    border-radius: 50px 50px  50px 0;
    transform: rotate(45deg);
}
#comment-bubble{
    width:140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    border-radius: 12px;
}
#comment-bubble:before{
    content: '';
    width:0;
    height:0;
    right:100%;
    top:38px;
    position: absolute;
    border-top:13px solid transparent;
    border-bottom:13px solid transparent;
    border-right:26px solid #088cb7;
}
#pac-man{
    width:0;
    height:0;
    border: 70px solid;
    border-color: #ffde00 transparent #ffde00 #ffde00;
    border-radius: 70px;
    /*border-top:70px solid #ffde00;*/
    /*border-right:70px solid transparent;*/
    /*border-bottom:70px solid #ffde00;*/
    /*border-left:70px solid #ffde00;*/
}