CSS3 Triangle/cut-out Border

Question

I'm wondering if there's an "easy" way to do something like below using CSS3, I want to avoid using images and absolute positioning, or similar, and would prefer to use some CSS method to achieve this.

I would also like to avoid using any fixed heights for this style too, since I'll be using the same style on various elements that all vary in size and colour.

Answer 1

You can use a simple clip-path in the CSS:

clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);

Result (in Chrome):

ONLINE DEMO

But be aware of that the support isn't that great yet for all browsers. Currently it does not work in FF as far as I can tell (I believe you can use SVG for FF instead).

Update

Ok, after playing around with SVG (I'm no expert on SVG) I came up with a "prototype" that works in FF:

In HTML:

<!-- For firefox -->
<svg class="svg-graphic" width="250" height="36" viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <clipPath id="mask">
        <polygon points="0, 0, 250, 0, 235, 18, 248, 35, 1, 35, 15, 18" />
    </clipPath>
</svg>

Then set its ID as clipping path in CSS:

clip-path:url(#mask);

And it will produce this in Firefox:

(fiddle updated with this code)