CSS代码沿元素边框裁剪出方形凹口？答案

【问题标题】：CSS code to crop out square notches along an element's border?CSS代码沿元素边框裁剪出方形凹口？
【发布时间】：2018-04-21 19:08:32
【问题描述】：

我正在创建一个瓷砖安装帮助网站，并希望将元素的边框设置为类似于缺口抹子：

是否可以按指定的间隔裁剪形状以实现这种外观？到目前为止我发现的是使用伪元素来获得所需的模式，如下所示：

但是，我需要一些可以从另一个中减去一个的东西，以便边框在不透明和透明之间交替。

【问题讨论】：

【解决方案1】：

你可以做到！其实很简单，推荐阅读This w3schools page on borders

我相信您的问题可以通过左右边框为实线以及底部和右侧点缀（与您的背景颜色相同）来完成。我希望这会有所帮助

【讨论】：

如果我只使用纯色，那会起作用，但我正在尝试在图像上制作图像。我通过用 Paint.net 切出正方形制作了一个 .png 来演示：imgur.com/UBLnog0
@AlexErtl 你能详细说明一下你的目标是什么吗？
我想用它作为我导航的容器，所以我试图让它尽可能动态。我发布到 imgur 的图片显示了它想要扩展的内容。