Question

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

以下是一些例子：

等待他们加载。

Answer 1

第一个用可重复的背景图像构建，第二个用：伪元素：

.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;
}

以下是第一个示例的背景图片链接：http://www.cssvillain.com/hungry/images/assets/parallax-bottom-alt.png

Answer 2

使用linear-gradient

制作之字形边框

50％是模糊
315deg是右侧的旋转
45deg是左侧的旋转
背景大小是三角形的宽度和位置

＆＃13;

div {
  width: 100%;
  height: 50px;
  background-size: 25px 120%;
  background-image: linear-gradient(315deg, red 50%, rgba(0, 0, 0, 0) 50%), 
                    linear-gradient(45deg, red 50%, black 50%);
}

＆＃13;

<div></div>

＆＃13;

您还可以通过更改deg值

来更改旋转角度

＆＃13;

div {
  width: 100%;
  height: 50px;
  background-size: 25px 150%;
  background-image: linear-gradient(297deg, red 50%, rgba(0, 0, 0, 0) 50%), 
                    linear-gradient(63deg, red 50%, black 50%);
}

＆＃13;

<div></div>

＆＃13;

CSS3如何制作锯齿形边框？

2 个答案: