沿元素边框裁剪出方形缺口的 CSS 代码?

标签 css border crop pseudo-element background-subtraction

我正在创建一个 tile 安装帮助网站,并希望将元素的边框样式设置为类似于带缺口的镘刀:

[抹刀] https://www.flooranddecor.com/installation-tools-tile-stone-installation-materials/pacesetter-square-notched-trowel-100381193.html

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

Wave border in CSS

但是,我需要一些东西来减去一个,以便边框在不透明和透明之间交替。

最佳答案

你可以的!其实很简单,我建议阅读 This w3schools page on borders

我相信您所要求的可以通过将左边框和上边框设为实心、将底部和右边框设为虚线(与背景颜色相同)来完成。希望对您有所帮助

关于沿元素边框裁剪出方形缺口的 CSS 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47190844/

相关文章:

javascript - 裁剪后调整图像大小

javascript - 图片库 - 移动设备优化

html - 滚动 div 顶部的 CSS 褪色部分

html - 可以仅使用一个 div 在填充内部放置边框吗?

iOS8 - 裁剪和拉直图像作为内置照片工具

css - 如何裁剪具有动态宽度、流畅布局的文本?

jquery - Bootstrap文本区域右对齐CSS

javascript - 我想在单击一个 div 时隐藏所有其他 div

html - 编写此边框 css 属性的最短方法是什么?

HTML/CSS : Div in Background matching containing text