是否可以使用纯css创建具有斜角效果锯齿形边缘？

mkh04yzy 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(137)

所以，我试图创建一个锯齿形的边缘上的元素与内部斜角的边缘，as in this image here.目前我管理它使用的边界图像，但我想知道如果它是可能的纯css，因为我做这个网站的人希望能够轻松地改变颜色的元素的问题，并有一个边界图像使它不那么容易。
我发现这个工具可以使用蒙版创建锯齿形边缘（https://css-generators.com/custom-borders/），效果很好，但是因为它是一个遮罩，我不能添加任何内嵌的框阴影，这是我通常做斜角的方式。我试着将元素 Package 在父div中，并对父div应用下拉阴影滤镜，但不幸的是，似乎阴影过滤器不允许插入阴影的方式框阴影。
有没有办法用纯css来实现这一点，或者我应该坚持边界图像，只是教他们如何改变png的颜色？

css

来源：https://stackoverflow.com/questions/74489245/is-it-possible-to-create-a-zig-zagged-edge-with-a-bevel-effect-using-pure-css

2条答案

按热度按时间

9gm1akwq1#

我会用这个工具来做遮罩部分，然后添加一个渐变色。根据你的需要改变红/蓝颜色，并调整right 10px来控制深度：
第一个

赞(0）回复(0）举报 2022-11-19

e7arh2l62#

最好的方法是使用SVG图像，它仍然是纯文本，易于编辑，并且可以使用CSS设置样式。您甚至可以将图像嵌入CSS中，如下所示：

border-image: url("data:image/svg+xml;charset=utf-8,<SVG goes here>");

赞(0）回复(0）举报 2022-11-19

我来回答

是否可以使用纯css创建具有斜角效果锯齿形边缘？

2条答案

相关问题

热门标签

最新问答