Hello reader !

If you want to make a shape using pure css (after and before pseudo Elements) without using any images follow the code below.

.wrapper{
    height: 220px;
    width:500px;
    margin: 0 auto;
}
.wrapper .midtop{
    margin: 0 auto;
}
.midbot{
    margin: 0 auto;
    transform: rotate(-180deg);
    top:20px;
}
.rightone{
    float: right;
    right: 120px;
    top: -40px;
    transform: rotate(90deg);

}
.leftone{
    float: left;
    left: 120px;
    top: -40px;
    transform: rotate(-90deg);
}
#shape { 
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;

}
#shape:hover{
    border-top: 100px solid #ccc;
}
#shape:after{
    background: #fff;
    border-radius: 70px;
    content: "";
    display: block;
    height: 100px;
    left: -50px;
    position: relative;
    top: -40px;
    width: 100px;
}

html:-

<div class="wrapper">
    <div id="shape" class="midtop"></div>
    <div id="shape" class="rightone"></div>
    <div id="shape" class="leftone"></div>
    <div id="shape" class="midbot"></div>
</div>