相关疑难解决方法(0)

在CSS中制作锯齿状三角形边框

我在Photoshop中有一个像这样的边缘的形状:

图片

是否可以将重复的三角形作为CSS边框?

css css3 css-shapes

18
推荐指数
3
解决办法
3万
查看次数

CSS之字形边界有织地不很细背景

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

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

我也试图在这个标题上添加带纹理的背景,延伸到曲折.但是,标题的垂直大小可能会更改,我无法将标题实现为单个图像.

如果我尝试在曲折边缘和标题元素上添加纹理,很可能,纹理将不同步.

(2)有关实现延伸到曲折的纹理背景而不是不同步的任何想法?

我的[旧]代码(以及纹理)在jsFiddle上.

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;
}
Run Code Online (Sandbox Code Playgroud)
<header>
  <br />
  <br />
  <br />
  <br />
</header>

<img src="http://i.imgur.com/qKsVr.png" />
Run Code Online (Sandbox Code Playgroud)


编辑#1:

谢谢Ana的代码.我接受了它并对其进行了改进.

http://dabblet.com/gist/3401493

我不认为一致的背景是可能的.

html css css3 zigzag css-shapes

13
推荐指数
3
解决办法
2万
查看次数

标签 统计

css ×2

css-shapes ×2

css3 ×2

html ×1

zigzag ×1