Skip to main content


This topic contains 5 replies, has 3 voices, and was last updated by  paulob 4 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #173870


    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.




    You can do something like this:

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star