sombra de caja con borde en forma de triángulo para crear div en forma de chevron

I'm trying to create a group of chevron shaped divs, and came across this article where the ribbon has an internal triangle shape.

I was trying to add an external border which would follow the triangle, which would achieve the affect I'm looking for without needing to use images.

Unfortunately, when I tried adding a box-shadow, I ended up with a square shadow around the div, not a shadow around the triangular bit.

Any suggestions on how to acheive this?

preguntado el 09 de marzo de 12 a las 14:03

1 Respuestas

I don't think there is currently any simple solution to create CSS shadows of shapes other than rectangles and rounded rectangles (using border-radius). But I think a possibility (albeit more complicated) would be using CSS3 transform rotations along with the box-shadow. You can pick up some techniques aquí which perhaps you can modify to suit your need.

respondido 09 mar '12, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.