框阴影与三角形边框创建雪佛龙形的div [英] box shadow with triangle shaped border to create chevron shaped div

问题描述

我想创建一组雪佛龙形状的div，并且遇到了这篇文章，其中的丝带有一个内部的三角形。
http://css-tricks.com/snippets/css/ribbon/

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.

不幸的是，当我尝试添加一个box-shadow时，我最终在div周围有一个方形阴影，而不是三角形周围的阴影。

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?

推荐答案

我不认为目前有任何简单的解决方案来创建矩形和圆角矩形之外的其他形状的CSS阴影 border-radius ）。但我认为一个可能性（虽然更复杂）将使用CSS3变换旋转与box-shadow。您可以选择一些技术这里，也许您可​​以根据需要进行修改。

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.

这篇关于框阴影与三角形边框创建雪佛龙形的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！