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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

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

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提供的代码。我接受并改进了它。

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

回答：

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

另外，即使当前的所有浏览器版本（除IE9之外）都支持CSS渐变（这将允许您获得 ）和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）。

以上是 CSS锯齿形边框和带纹理的背景 的全部内容， 来源链接： utcz.com/qa/401534.html

回到顶部