1. Square

Html

<div class="square"></div>

Css

.square { 
   width: 100px;
   height: 100px;
   background: #f45b69;
}

Preview

2. Circle

Html

<div class="circle"></div>

Css

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f45b69;
}

Preview

3. Triangle

Html

<div class="triangle"></div>

Css

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #f45b69;
}

Preview

4. Parallelogram

Html

<div class="parallelogram"></div>

Css

.parallelogram {
    width: 100px;
    height: 50px;
    transform: skew(15deg);
    background: #f45b69;
}

Preview

5. Diamond

Html

<div class="diamond"></div>

Css

.diamond {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background: #f45b69;
}

Preview