有没有办法在身体的顶部、左侧、底部和右侧创建具有锯齿形效果的背景？

Posted 2023-02-21

【中文标题】有没有办法在身体的顶部、左侧、底部和右侧创建具有锯齿形效果的背景？

【英文标题】：Is there a way to create a background with a zig-zag effect on the top, left, bottom, and right side of a body?

【发布时间】：2020-11-29 21:20:53

【问题描述】：

我曾尝试创建多个容器，然后将它们从 360 旋转到 270，以使它们在页面中四处走动，但没有奏效。

CSS：

.zigzag-section:after
  content:'';
  position:absolute;
  width:100%;
  height:40px;
  top:100vh;
  display:block;
  background:linear-gradient(-45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  ), linear-gradient(45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  );
  background-size: 30px 90px;
  transform:rotate(360deg);


.zigag-section:after
  content:'';
  position:absolute;
  width:100%;
  height:40px;
  top:100vh;
  display:block;
  background:linear-gradient(-45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  ), linear-gradient(45deg, transparent 33.33%,
              #00e676 33.33%,#00e676 66.66%,
              transparent 66.66%
  );
  background-size: 30px 90px;
  transform:rotate(360deg);

.content
  width:45%;
  height:20vh;
  
  position:relative;
 
  top:50%;left:50%;
  transform:translate(-50%,-50%);

html：

<div class = "zigag-section">
     </div>
  <div class = "zigzag-section">
  </div>

我只创建了 2 个之字形部分，因为第二个（之字形）不会完全向左移动，并且当我扩展宽度时，调整大小时该部分不会随浏览器移动。

【问题讨论】：

请分享您的尝试

签出：projects.verou.me/css3patterns

@Dominik，我正在尝试使背景看起来好像在看内容，例如如何将 zig-zag 标头定位为“向下看”，而另一个 zig-zag 标头是如何定位的'向右看，基本上，我知道创建多个之字形以使它们在屏幕上移动的方法，但我需要知道如何将它们粘贴到右侧、左侧或底部

那么...你在找position: fixed吗？

【参考方案1】：

好吧，如果你想把它当作背景，你需要把你的内容放在 div 里面，这个 div 会有锯齿形。或者，在本例中，背景：

<div class="zigzag">
  <div class="content-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id diam libero. Morbi et libero dapibus, consectetur massa vitae, faucibus dolor. Suspendisse sollicitudin hendrerit convallis. Pellentesque eu arcu pellentesque, aliquam massa non, lacinia libero. Vivamus vestibulum neque varius imperdiet consequat. Sed viverra est non tellus efficitur, aliquam fermentum elit tristique. Duis sit amet orci placerat, ornare libero sed, commodo eros. Fusce vitae iaculis massa.</div>
</div>

这样您就可以在 zig-zag 类上设置所需的背景：

.content-container  
  background: rgba(255,255,255, .7);
  padding: 10px;


.zigzag 
  padding: 40px 100px;
  background:
  linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
  linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
  background-color:#708090;
  background-size: 64px 128px;

希望这是您正在寻找的解决方案。下面是sn-p

.content-container  
  background: rgba(255,255,255, .7);
  padding: 10px;


.zigzag 
  padding: 40px 100px;
  background:
linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px;

<div class="zigzag">
  <div class="content-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id diam libero. Morbi et libero dapibus, consectetur massa vitae, faucibus dolor. Suspendisse sollicitudin hendrerit convallis. Pellentesque eu arcu pellentesque, aliquam massa non, lacinia libero. Vivamus vestibulum neque varius imperdiet consequat. Sed viverra est non tellus efficitur, aliquam fermentum elit tristique. Duis sit amet orci placerat, ornare libero sed, commodo eros. Fusce vitae iaculis massa.</div>
</div>

【讨论】：

很遗憾，这不起作用，我的意思是像背景一样包围内容但不覆盖内容的背景，如果这有意义吗？

喜欢某种边框？

是的，没错！就像贴在屏幕两侧的边框