如何制作CSS之字形边框? [英] How to make CSS zig-zag borders?

问题描述

我正在尝试沿着标题元素的基线获得这种效果.

I am trying to get this effect along the baseline of my header element.

最好的方法是什么?有没有图像(也许是SVG)的方法吗?

What is the best way to go about it? Is there any way to do it without images (maybe SVG)?

我认为可以很好地实现的一种方法是在绝对定位的伪元素上使用白色正方形的repeat-x背景图像.但是，它使用图像，我希望能够避免这种情况.

A way I reckon this could be accomplished pretty nicely is using a repeat-x background image of a white square on an absolutely positioned pseudo element. However, that uses images and I'd love to be able to avoid that.

推荐答案

这是解决方案.这就是锯齿形边框.

Here is solution. It's called zig-zag border.

http://jsfiddle.net/justinmc/QqnD3/

<div class="container">
    <h1>Content Here</h1>
</div>

.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}

.container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

学分 https://cocreate.localmotors.com/blog/post/zig-zag-borders-in-css/1205/

这篇关于如何制作CSS之字形边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！