The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › [Solved] responsive percentage based right triangle
im trying to create a right triangle that is fixed positioned at top: 0, left:0 and takes up 50% width and 50% height….to make the triangle i have to use the border property which is fine its just that border uses pixels…not percent…help?
Basically, if you want to use CSS triangles based on borders, you have to use pixels (or pixel based values such as rem/em etc).
There is no getting round that….unfortunately.
Is this an assignment/text or just a wish list?
Yeah…CSS triangles would not be the optimal solution to that.
Hi,
You can do something like this:
http://codepen.io/paulobrien/full/FoACz/
However it is a fixed ratio triangle although it scales up and down based on the width.
I don’t think its possible with css borders to get any closer as you seem to want a ‘stretchy’ triangle that changes shape.
You could do it with an actual triangle image and just hook its width and height into 50% of the viewport. Or perhaps use svg.
