Flexible CSS triangles?

Question

I want to add triangles onto the sides of a block to shape it into an arrow like so. But it needs to be flexible and adapt to different lengths of text. I'm thinking that the traditional css-triangles-made-from-borders technique isn't going to work, but that's all I've got so far (demo). Does anyone else have a more robust solution?

Cutting-edge css is fine as long as it degrades nicely.

If CSS3 is ok, can't you just make the whole thing a background image and use the background-size property accordingly to make it stretch? — Jon Newmuis
– Jon Newmuis, Commented Jul 26, 2012 at 16:16
Hmm, that's a good idea. I'd rather avoid using images if possible, and I worry that stretching it too much will make it fuzzy, but this may be the best solution. Thanks! — user1555283
– user1555283, Commented Jul 26, 2012 at 20:05

Ana · Accepted Answer · 2012-07-26 20:31:01Z

5

I think the best compatibility solution would be http://dabblet.com/gist/3184227

It uses just pseudo-elements and CSS transforms (so it works in IE9 and it may be adapted to IE8, where the pseudo-elements could be skewed using a matrix filter - I've never checked whether that actually works... I only know that gradient filters don't work on pseudo-elements).

The idea is really simple: use two pseudo-elements, each having half the height, absolutely position them, one taking up the upper half and the other one the lower half and finally skew them in opposite directions.

HTML:

<div class="t">
    <p>Add text to see how it scales</p>
</div>

Relevant CSS:

.t {
    position: relative;
}
.t:before, 
.t:after {
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    content: '';
}
.t:before {
    top: 0;
    bottom: 50%;
    transform: skewX(10deg);
}
.t:after {
    top: 50%;
    bottom: 0;
    transform: skewX(-10deg);
}

It can be done without pseudo-elements, using just CSS gradients. Unfortunately, IE9 does not support them.

edited Jul 26, 2012 at 20:31

answered Jul 26, 2012 at 20:11

Ana

37.6k7 gold badges88 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1555283 Over a year ago

That is really sexy, thanks very much! I hadn't considered css gradients as a fix to this either, but your primary solution makes more sense to my feeble brain.

Ana Over a year ago

@froderik It does work in Chrome, but not unprefixed yet - see caniuse.com/#feat=transforms2d You need to add the -webkit-transform version before the unprefixed one. My demo does not include any prefixes because it uses -prefix-free leaverou.github.io/prefixfree which adds the prefixes as needed.

Collectives™ on Stack Overflow

Flexible CSS triangles?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related