Advertisement


How can I create this irregularly-shaped border with pure CSS (no images)?


Question

I am trying to avoid using a background image (or any image-based solution) to effectively create this:

irregular border

Note: the red arrow is just pointing at the border in question. The arrow should not be included in your answer.

How can I create this irregularly-shaped border with pure CSS (no images)? If images are unavoidable, the most concise and readable answer will get upvoted and accepted.

2017/03/10
1
12
3/10/2017 9:42:00 AM

Accepted Answer

You could use CSS (keeping in mind this won't work with older versions of IE).

For example, you could combine some shapes like a rectangle and two triangles. See this jsfiddle.

enter image description here

HTML:

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

And the CSS:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

You can see a variety of CSS shapes here. Most if not all require more than one div, so the challenge would be applying a darker border.

2014/10/20
12
10/20/2014 1:52:00 PM

Yisela's answer is solid, but I figured I'd offer up this alternative: using polygon or an image URI with CSS shapes and clip-path. Here's a quick tutorial.

Note that this method will work with even fewer browsers than the triangle border trick at the moment. However, if you want to use a more complex shape or wrap your text to the shape this will be the way to go.

demo-screenshot

2013/11/12