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
¿Puede la pseudoclase: not () tener múltiples argumentos?Establecer el tamaño de la imagen de fondo con CSS?Soporte del navegador para los números de página de CSSAnimaciones CSS con retraso para cada elemento secundarioDetecta si una entrada tiene texto usando CSS, en una página que estoy visitando y que no controlo.¿Puede CSS detectar la cantidad de hijos que tiene un elemento?¿Hay alguna manera de verificar qué estilos CSS se están utilizando o no en una página web?¿Son las carrozas malas? Qué debería usarse en su lugar