Borde con una flecha centrada transparente

Estoy tratando de diseñar un div con un borde inferior que tenga una flecha hacia abajo . El div tendrá una imagen y no debe tener un borde superior, derecho o izquierdo. El relleno de la flecha que apunta hacia abajo debe ser el mismo que el div o transparente.

He podido hacer que funcione en su mayor parte usando el siguiente código:

.hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } 
 

Vea este violín: http://jsfiddle.net/alisamii/tjep3h8t/

Todo lo que trato de hacer para “ahuecar” la flecha resulta en un div sin bordes (por lo que tiene un relleno de amarillo, pero sin bordes en ningún lado) o en un borde que rodea todo el div.

¿Alguna ayuda?

Hay dos métodos para lograr esto usando CSS3. Uno está utilizando skewX en pseudoelementos mientras que el otro está utilizando rotate en pseudoelementos. Ambos métodos también son receptivos .

Usando sesgo:

Este método está adaptado de la respuesta de web-tiki en este hilo. Básicamente utiliza dos pseudo-elementos (con aproximadamente el 50% de ancho del contenedor) que están sesgados en direcciones opuestas y posicionados de manera apropiada para llegar a la forma de la flecha. Las formas tienen bordes donde el background se establece en transparente, lo que significa que los pseudo-elementos producirían un efecto de borde inferior + flecha hacia abajo. El relleno de flecha siempre sería transparente (o color de cuerpo) en esta muestra.

 body { background: rgb(245, 242, 242); } .bordered { position: relative; height: 200px; width: 200px; margin: 10px; line-height: 200px; } .bordered:after, .bordered:before { position: absolute; content: ' '; height: 8px; width: 50%; bottom: 0px; } .bordered:before { left: 0px; border-top: 1px solid gray; border-right: 1px solid gray; transform-origin: left bottom; transform: skewX(45deg); } .bordered:after { right: 0px; border-top: 1px solid gray; border-left: 1px solid gray; transform-origin: right bottom; transform: skewX(-45deg); } .bordered img { width: 150px; padding: 25px; vertical-align: middle; } /* Just for demo */ .bordered { transition: all 1s; text-align: center; } .bordered:hover { height: 250px; width: 250px; line-height: 250px; } 
   

Una solución simple donde el fondo de la flecha será transparente, lo que le permitirá usarla en los fondos cambiantes:

HTML:

 

CSS:

 .side-line { display: inline-block; border-top: 1px solid black; width: 20%; } .triangle { display: inline-block; height: 7px; width: 7px; transform: rotate(45deg); transform-origin: center center; border-top: 1px solid black; border-left: 1px solid black; margin-left: -3px; margin-right: -3px; margin-bottom: -3px; } 

Demostración en vivo: http://jsfiddle.net/85saaphw/

No estoy seguro de si esta es la mejor solución, pero una opción podría ser usar a :before para renderizar el triángulo naranja y a :after para renderizar un triángulo ligeramente más pequeño con el color de fondo. El :after triángulo cubre principalmente el triángulo :before triángulo dejando solo un pequeño triángulo naranja. Desafortunadamente no puede ser transparente si lo resuelves de esta manera.

 .hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:before { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } .hero:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -48px; width: 0; height: 0; border-top: solid 48px yellow; border-left: solid 48px transparent; border-right: solid 48px transparent; }