Fronteira com uma seta cinput transparente

Eu estou tentando estilo um div com uma borda inferior que tem uma seta apontando para baixo . O div terá uma imagem e não deverá ter uma borda superior, direita ou esquerda. O preenchimento da seta apontando para baixo deve ser o mesmo que o div ou transparente.

Eu consegui fazer com que funcionasse na maior parte usando o código abaixo:

.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; } 
 

Veja este violino: http://jsfiddle.net/alisamii/tjep3h8t/

Tudo o que eu tento fazer para “escavar” a flecha resulta em uma div sem bordas (por isso, tem um preenchimento de amarelo, mas nenhuma borda em qualquer lado) ou em uma borda que circunda o div inteiro.

Qualquer ajuda?

Existem dois methods para conseguir isso usando CSS3. Um está usando skewX em pseudo-elementos enquanto o outro está usando rotate em pseudo-elementos. Ambos os methods também são responsivos .

Usando o Skew:

Este método é adaptado da resposta do web-tiki neste tópico. Basicamente, ele usa dois pseudo-elementos (com cerca de 50% da largura do contêiner) que estão inclinados em direções opostas e posicionados apropriadamente para chegar ao formato da seta. As formas têm bordas onde, como o background é definido como transparente, o que significa que os pseudo-elementos produziriam um efeito de borda inferior + seta para baixo. O preenchimento de seta sempre seria transparente (ou cor do corpo) nessa amostra.

 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; } 
   

Uma solução simples, em que o plano de fundo da seta será transparente, permitindo usá-lo na alteração de planos de fundo:

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; } 

Demonstração ao vivo: http://jsfiddle.net/85saaphw/

Não tenho certeza se essa é a melhor solução, mas uma opção poderia ser usar um :before para renderizar o triângulo laranja e a :after para renderizar um triângulo um pouco menor com a cor do plano de fundo. O :after triângulo cobre principalmente o :before triângulo, deixando apenas uma pequena borda de triângulo laranja. Infelizmente, não pode ser transparente se você resolver isso dessa maneira.

 .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; } 
 
    Intereting Posts