DOKRY Desarrollo
  1. DOKRY Desarrollo
  3. Forma de mitad de hexágono con un elemento

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/
Intereting Posts
CSS: posición fija en el eje x pero no y?¿Cómo combino una imagen de fondo y un degradado de CSS3 en el mismo elemento?¿Cómo se supone que funciona un CSS “display: table-column”?CSS: cómo desbordar de div al ancho completo de la pantallaCambiar el ancho de Bootstrap popoverSoporte de derecha a izquierda para Twitter Bootstrap 3¿Por qué y no toman font-family y font-size del cuerpo?Los íconos de Bootstrap se cargan localmente pero no cuando están en línea