CSS锯齿形边框和带纹理的背景

一尘不染

CSS锯齿形边框和带纹理的背景

css

我一直在研究带有锯齿形边框的标头。一种方法是使用图像制作锯齿形效果。

（1）有没有办法在不使用图像的情况下在CSS中创建实用的跨浏览器之字形边框？

我还试图在此标头上放置带纹理的背景，该背景延伸到之字形。但是，标头的垂直大小可能会发生变化，并且我无法将标头实现为单个图像。

如果我尝试向曲折边缘和标头元素添加纹理，则很有可能纹理将不同步。

（2）关于实现带纹理的背景并延伸到锯齿形而不偏离同步的任何想法？

我的[旧]代码（以及纹理）在。

body {

  padding: 20px;

}



header {

  width: 240px;

  background-color: #BCED91;

}



header:after {

  content: " ";

  display: block;

  position: relative;

  width: 240px;

  bottom: -15px;

  height: 15px;

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;

}



img {

  margin-top: 50px;

}


<header>

  <br />

  <br />

  <br />

  <br />

</header>



<img src="http://i.imgur.com/qKsVr.png" />

编辑＃1：

感谢Ana提供的代码。我接受并改进了它。

我认为不可能有一个一致的背景。

阅读 352

2020-05-16

共1个答案

一尘不染

如果要使用border-image，那么它不是跨浏览器的解决方案，因为IE不支持它。

另外，即使当前的所有浏览器版本（除IE9之外）都支持CSS渐变（这将允许您获得 Zig-
zag模式）和border- image，上次我检查（这是几个月前，所以最好再次进行测试），渐变border- image仅适用于WebKit。另外，我不认为即使在WebKit中，它也可以用于多个渐变（因为您只能设置一个边框图像，而一个渐变就是一幅图像），并且曲折图案需要两个渐变。

CSS之字形模式的代码为：

background: linear-gradient(#BCED91 49%, transparent 49%),
        linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,
        white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;
    background-repeat: repeat-x;
    background-size: 1px 100%, 40px 40px, 40px 40px;

如果您想要一个与此下方同步的纹理，则必须确保它以相同的间隔重复（40px，但您也可以使用20px）。

2020-05-16