box shadow with triangle shaped border to create c

问题:

I'm trying to create a group of chevron shaped divs, and came across this article where the ribbon has an internal triangle shape. http://css-tricks.com/snippets/css/ribbon/

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?

回答1:

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 here which perhaps you can modify to suit your need.