How to make CSS zig-zag borders?

Question

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

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

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.

check out this post - looks like they solved it over there http://stackoverflow.com/questions/13774952/making-jagged-triangle-border-in-css — HisPowerLevelIsOver9000, Jul 13 '16 at 13:03
an online generator for this and more: https://css-generators.com/custom-borders/ — Temani Afif, Nov 14 '22 at 19:49

score 16 · Accepted Answer · answered Jul 13 '16 at 13:05

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;
}

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

How to make CSS zig-zag borders?

1 Answers1

Linked

Related