问题
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.
来源：https://stackoverflow.com/questions/9635545/box-shadow-with-triangle-shaped-border-to-create-chevron-shaped-div