CODEWITHSUNDEEP
css
user1555283
user1555283

Reputation: 35

Flexible CSS triangles?

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.

Upvotes: 1

Views: 3059

Answers (1)

Ana
Ana

Reputation: 37169

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.

Upvotes: 5

Related Questions