Adding on a triangle

[shaneisme]

So I’ve been trying to figure out the best way to go about this, but I think I’m over-complicating things.

I’m open to completely different methods if someone knows a better way.

The requirements are to add a right-angle triangle on to a text element. This can be added on the left or the right side, also it can be pointed up or down.

Here’s what I have so far:

http://codepen.io/drainpip/pen/OVvxXo

Don’t mind all the over-complicated-looking SCSS, I’m just throwing it in there from my project.

I was messing with a modifier to set the height, but that gets insane really quick when I’m dealing with so many differently sized elements + even those have a text scale at different resolutions that breaks the modifier.

I need the “flat” side to be 100% the height of whatever element I put it on…

One other complication, in some instances I’m going to be using a triangle on both the left & right sides of an element a la parallelogram.

Appreciate any thoughts / help.

[Paulie_D]

The most obvious solution is to relate the pseudo-element’s border size to the line-height of the parent..exactly half of course…I’m sure a pre-processor could handle that.

http://codepen.io/Paulie-D/pen/PqROxN

Since we have two pseudo-elements available a logical arrangement where the ::before handles the left side triangles and the ::after handles the right side seems right…thus parallelagrams.

Naturally this will break when the parent spans multiple lines. For that one I’d have to think.

Probably a rotated square and overflow:hidden…but the math gets funky there too.

Something to think about today…yay!

[Paulie_D]

Naturally this will break when the parent spans multiple lines. For that one I’d have to think.

Probably a rotated square and overflow:hidden…but the math gets funky there too.

Nah…that one is trouble…although you can easily size the absolutely positioned square to the height of the parent there’s no easy way to make the width equal to the height automagically…that I can think of.

[Paulie_D]

As it happens this came up on SO today as well.

clip-path might be an answer – http://stackoverflow.com/questions/31270207/dynamic-responsive-trapezoid-text-div/31270551?noredirect=1#comment50535847_31270551

[Paulie_D]

I want .angle to just have a height of 100% or something like that, but when I don’t specify a width the SVG just fills in whatever space is there and won’t line up to the left.

Which is the issue I had…there doesn’t seem to be a way of forcing an absolutely positioned element to be square based height:100.

[Shikkediel]

I think you can leave out the width if you give the svg the same viewbox. If scripting is not off the table, you could also calculate the height of the element and insert a basic path.

[Shikkediel]

Using pixels does indeed make things a lot less complicated…

[Romchick]

Is it impossible to use image with triangle? or css is important?

[Romchick]

Well, maybe you can squeeze something from this http://codepen.io/NeedHate/pen/YXLgjB. Dont know why its buggy… the angle looks sharp, sometimes not.

UPD Aha, by adding some trick like scale(.999) it looks smooth.

[Author]

Posts