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
Coincidir con todos los selectores de clase que comienzan con?El reemplazo de FontAwesome en la etiqueta muestra el cuadrado vacíoRadio de borde CSS no recorte de imagen en WebkitIE8 display inline-block no funcionaAttr () de CSS3 no funciona en los principales navegadores¿Cuáles son las diferencias entre flex-grow y ancho?¿Cómo combinar clase e ID en el selector de CSS?Separadores para navegación