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

标签 javascript html css

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

asdfasdfsadfasd

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

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

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

最佳答案

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

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

关于javascript - 如何在 CSS/Javascript 中制作像素化的非直线边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58071722/

相关文章:

javascript - 我可以向 html 元素添加自定义属性吗?

javascript - 我可以使用解构来创建深层复制吗?

javascript - 当客户端互联网关闭时的 Socket.io

javascript - 设置时检查图片src是否有效

javascript - 根据第一个表的行的降序总和创建另一个表

javascript - 添加 Div 标签以环绕 LI 元素

html - 带 float 元素的 CSS margin-top

css - 导航菜单设计

javascript - 添加事件监听器

javascript - 为什么我无法按对象的实例排序?