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

Posted 2023-02-21

【中文标题】CSS3之字形边框是如何制作的？

【英文标题】：CSS3 How are zigzagged borders made?

【发布时间】：2015-04-04 11:47:11

【问题描述】：

我已经看到很多新网站在图像和 div 之间具有锯齿形边框。当您在新选项卡中打开图像时，锯齿形不存在，因此它是使用 CSS3 或 html5 创建的。有谁知道它是怎么做的吗？

这里有一些例子：

http://themeforest.net/item/hungry-a-onepage-html-restaurant-template/full_screen_preview/9855248ref=freshdesignweb http://designwp.com/yummie/brown/index.html

等待它们加载。

【参考方案1】：

之字形边框使用linear-gradient制作

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

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%);

<div></div>

您还可以通过更改deg 值来更改旋转角度

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%);

<div></div>

【讨论】：

@eagleCDK 或 -45deg;是一样的

【参考方案2】：

第一个是用可重复的背景图像构建的，第二个是用 :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;

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