javascript - 如何在 CSS/Javascript 中制作像素化的非直线边框？

Question

所以我有一些元素想在我正在处理的元素中显示。他们每个人都应该看起来像一个像素化的横幅。这是一个例子:

左右直线很容易。这些只是简单的边界。横幅的底部是困难的部分。我希望它能够像 flex 对象那样进行调整。这个要求使得很难找到解决方案。像素需要保持相同的大小，因此 svg 似乎不起作用。

昨晚我花了相当多的时间在谷歌上搜索，找到了一些解决方案，但似乎都无法调整。它们是通过像素操作获得效果的静态尺寸。

谁能想到如何实现这种效果？只要被指向正确的方向也会很棒。

Answer 1

我认为 border-image属性(property)可能会帮助你。您需要一张带有像素边框的静态图像，以便在适当的位置进行切片。

你也可以试试 border-radius用于 flex 边界，如果您现在使用的解决方案适用于该解决方案。