相关疑难解决方法(0)

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中创建类似边框效果的Droplet

我在Photoshop中创建了这个边框设计,并想知道是否有人可以给我一些如何使用重新创建它的指导css.

边界

css radial-gradients css3 css-shapes

6
推荐指数
1
解决办法
1801
查看次数

如何制作 CSS 之字形边框?

我试图沿着我的标题元素的基线获得这种效果。

在此处输入图片说明

最好的方法是什么?有没有办法在没有图像的情况下做到这一点(也许是 SVG)?

我认为这可以很好地完成的一种方法是在绝对定位的伪元素上使用白色方块的重复 x 背景图像。但是,它使用图像,我很想能够避免这种情况。

html css svg

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

标签 统计

css ×3

css-shapes ×2

css3 ×2

html ×2

radial-gradients ×1

svg ×1

zigzag ×1