css - Half hexagon shape with one element

Question

I'm trying to replicate the following shape with no success:

I'm guessing I'll need some :before and :after pseudo elements along with the following css:

#pentagon {
    position: relative;
    width: 78px;
    height:50px;
    background:#3a93d0;
} 

Answer 1

Using Border Method:

You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method.

.pentagon {
  height: 50px;
  width: 78px;
  background: #3a93d0;
  position: relative;
}
.pentagon:after {
  border: 39px solid #3a93d0;
  border-top-width: 15px;
  border-color: #3a93d0 transparent transparent transparent;
  position: absolute;
  top: 50px;
  content: '';
}

<div class="pentagon"></div>