我正在尝试创建一组人字形 div,并遇到了这篇文章,其中功能区具有内部三角形形状。 http://css-tricks.com/snippets/css/ribbon/
我试图添加一个跟随三角形的外部边框,这将实现我正在寻找的效果,而无需使用图像。
不幸的是,当我尝试添加 box-shadow 时,我最终在 div 周围出现了一个方形阴影,而不是在三角形位周围出现了一个阴影。
关于如何实现这一目标的任何建议?
我正在尝试创建一组人字形 div,并遇到了这篇文章,其中功能区具有内部三角形形状。 http://css-tricks.com/snippets/css/ribbon/
我试图添加一个跟随三角形的外部边框,这将实现我正在寻找的效果,而无需使用图像。
不幸的是,当我尝试添加 box-shadow 时,我最终在 div 周围出现了一个方形阴影,而不是在三角形位周围出现了一个阴影。
关于如何实现这一目标的任何建议?
我认为目前没有任何简单的解决方案可以创建除矩形和圆角矩形以外的形状的 CSS 阴影(使用border-radius
)。但我认为一种可能性(尽管更复杂)是使用 CSS3 变换旋转和盒子阴影。你可以在这里学习一些技术,也许你可以根据自己的需要进行修改。