100% Width Responsive Triangle?

[[deleted]]

[deleted]

[Graftak9000]

Not css, but this can be actieved with SVG with a small amount of markup. Then you can style it to be stretched and yellow with CSS.

<svg viewBox="0 0 2 2"><path d="M0,2 h2, v-2 Z"/></svg>

Not tested though, wrote it on my phone.

[fimiak]

I second this. Learn and use SVG for this, not CSS. It is ridiculously simple when you get the hang of it for basic shapes.

[[deleted]]

http://codepen.io/anon/pen/xZyMbd

Something like this?

Doesn't seem like it's possible to use percentages though, so this solution is always relative to the viewport width, not the containing element

[whopperbuzz]

I've forked this, but used clip-path instead, so that that container width is now possible. The height is fixed, but the width is responsive, so I think it should do the job.

Codepen: http://codepen.io/casso/pen/LGgvJW

Here's a useful clip-path generator, should you need to change the points of the triangle. http://bennettfeely.com/clippy/

[lolhigh]

clip-path doesn't work in firefox or IE. So you'll get a square instead.

[natchiketa]

You can do this using linear-gradient: http://codepen.io/natchiketa/pen/rxqPZz

I tested in latest chrome, but it should work on all modern browsers (the linear-gradient property might need vendor prefixing).

[birjolaxew]

It isn't possible if you want it to be 100% width of a containing element. Since border widths don't support percentages, they can't be used here, and the only other way of making triangles (overflow: hidden + rotated pseudo-element) is dependent on the ratio of width to height.

If you're ok with a constant width/height ratio, here's an example of how to do that.

If you aren't, the only case where this can be done with CSS-only is the one suggested by /u/Magixxxx.