Forma de mitad de hexágono con un elemento

Estoy tratando de replicar la siguiente forma sin éxito:

enter image description here

Supongo que necesitaré algo :before y :after pseudo elementos junto con el siguiente css:

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

Usando el Método del Borde:

Puedes hacerlo usando el siguiente CSS. La forma se obtiene colocando una forma de triángulo en la parte inferior del rectángulo usando :after pseudo elemento. La parte triangular se logra usando el método de border .

 .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: ''; } 
 

Puede intentar un enfoque alternativo utilizando transform scaleX y rotate: 45deg; . Esto hace que sea muy fácil crear la parte inferior de la forma.

 transform: scaleX() rotate(45deg); 

Trabajando

* lo siento por mala calidad gif! 🙁

enter image description here

Sans border:

Violín

 #pent{ height: 50px; width: 100px; position: relative; background-color: deepskyblue; } #pent:before{ content: ''; position: absolute; bottom: 0; left: 0; width:45px; height:45px; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleX(1.57) rotate(45deg); -moz-transform: scaleX(1.57) rotate(45deg); -ms-transform: scaleX(1.57) rotate(45deg); transform: scaleX(1.57) rotate(45deg); background-color: deepskyblue; } 
 

Vea una demostración : básicamente usa triangularjs CSS y un pseudo elemento para dar un lugar al triángulo.

 .shape { position: relative; width: 78px; height:30px; background:#3a93d0; } .shape:after { content: ''; display: block; position: absolute; top: 100%; width: 0; height: 0; border-style: solid; border-width: 25px 39px 0 39px; border-color: #3a93d0 transparent transparent transparent; } 
  

si no quieres usar css3 puedes hacerlo con css only problem es que esta implementación no responde. 🙁

 
 
.moregrey { width: 1000px; height: 30px; background: #3f3f40; } .arrowdown { border-top:50px solid #3f3f40; border-left:500px solid transparent; border-bottom:500px solid transparent; border-right:500px solid transparent; display:block; width:0px; height:10px; }
 http://jsfiddle.net/jmqoj5nh/1/