Skip to main content

Forums

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #173870
    rwchampin
    Participant

    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?

    #173873
    rwchampin
    Participant

    This reply has been reported for inappropriate content.

    or can it be done with jquery?

    #173874
    Paulie_D
    Moderator

    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?

    #173878
    rwchampin
    Participant

    This reply has been reported for inappropriate content.

    no im working on a parallax scrolling site and i want there to be four differently opaque right triangles that each take up 1/4 of the window…..and on scroll i want to animate them based on pixels scrolled to rotate….i think i got it tho…with svg

    #173881
    Paulie_D
    Moderator

    Yeah…CSS triangles would not be the optimal solution to that.

    #173882
    paulob
    Participant

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star