Estoy tratando de replicar la siguiente forma sin éxito:
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! 🙁
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/