css 锯齿边框-CSS3之字形边框是如何制作的？

bendan520 2023年8月29日 css 0

CSS3之字形边框是如何制作的？

CSS

CSS3之字形边框是如何制作的？ , css, border, zigzag, Css, Border, Zigzagcss 锯齿边框，我听说很多新网站的图像和 div 之间都有锯齿形边框。 当您在新选项卡中打开图像时，锯齿状边框不存在，因此它是使用 CSS3 或 HTML5 创建的。 有谁知道这是如何做到的？ 以下是一些示例：等待它们加载。 第一个是使用可重复的背景图像构建的，第二个是使用:before伪元素构建的：.ss-style-top::before {position:absolute; 内容： ''; 左：0； 宽度：100%； 高度：30px； 背景

我听说很多新网站的图像和 div 之间都有锯齿状边框。 当您在新选项卡中打开图像时css 锯齿边框，锯齿状边框不存在，因此它是使用 CSS3 或 HTML5 创建的。有人知道这是如何完成的吗？

css绘制锯齿边框_css 锯齿边框_锯齿状边框

这里有些例子：

等待它们加载。

第一个是使用可重复的背景图像创建的，第二个是使用 :before 伪元素创建的：

.ss-style-top::before {
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  height: 30px;
  background-size: 25px 100%;
  top: 0;
  background-image: linear-gradient(315deg, #FFF 50%, transparent 50%), 
  linear-gradient(45deg, #FFF 50%, transparent 50%);
  margin-top: -30px;
  z-index: 100;
}

css绘制锯齿边框_css 锯齿边框_锯齿状边框

这是第一个示例中背景图像的链接：

使用

线性梯度制作锯齿形边框


    

  • 50%是模糊
    • 

  • 315度是右侧的旋转角度
    • 

  • 45度是左侧的旋转角度
    • 

  • 背景大小是三角形的宽度和位置
    • 



div{
宽度：100%；
高度：50px；
背景大小：25px120%；
背景图像：线性梯度（315度，红色50%，rgba（0,0,0,0）50%），
线性梯度（45度，红色50%，黑色50%）；
}








@eagleCDK 或-45 度； 两者相同