Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to turn this triangle into responsive

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #205084
    makapaka
    Participant

    So i have the following triangle:

    .tri-top-right:before {
    content:'';
    display: block;
    border-top: 500px solid black;
    border-left: 500px solid transparent;
    position: absolute;
    top: 0;
    right: 0;
    }

    I’ve seen lots of examples now of triangles that are responsive, but for the life of me i cannot understand the code – i do not want to just copy-paste, i really need to understand this stuff so i need an explanation.

    So the above code produces a specific size triangle, i want to understand how to make that responsive and what the responsive changes actually mean in the browser.

    Demo: http://jsfiddle.net/au7ggmg8/

    #205085
    Paulie_D
    Member

    I’ve seen lots of examples now of triangles that are responsive.

    It depends what you mean by responsive.

    Fixed px value borders…obviously not responsive.

    em value based borders, a little better, they react to font size.

    vh/vw value based borders, marginal but at least they react to viewport size.

    % based borders – don’t exist.

    So…what’s the question again?

    #205086
    makapaka
    Participant

    ok i have a ways to go learning this, bare with me :)

    So i have a PSD to HTML scenario – so as per normal in this scenario, I need to replicate the PSD sizes ‘pixel perfect’ blah blah.

    So if the dimensions in a PSD are a certain size, u set those widths/heights as shown in the PSD. But then, how do u make that responsive ?

    I hope that makes it a tad more clear. The above jfiddle, I would expect, regardless of what is around it, should shrink down when u make the result window as small as it can go.

    So the question really applies to any kind of shape in css – how do u take a fixed size from a mockup/psd and replicate that size, but make it responsive

    #205087
    makapaka
    Participant

    ok so as an example, i found this jfiddle: http://jsfiddle.net/josedvq/3HG6d/

    That triangle is responsive when u mess with the width. So i’m really just trying to understand what in that css makes it responsive.

    #205088
    Paulie_D
    Member

    The above jfiddle, I would expect, regardless of what is around it, should shrink down when u make the result window as small as it can go.

    But it can’t…it’s got fixed pixel size on it.

    Now this one is responsive because it’s sized to the viewport but obviously that might be appropriate in all situations.

    http://jsfiddle.net/au7ggmg8/1/

    Depends on what you are trying to do as to the best solution.

    #205089
    makapaka
    Participant

    Indeed, i know it cant but im trying to figure out how to change those fixed sizes so its responsive YET conforms to the PSD ‘pixel perfect’ mockup :)

    #205091
    Paulie_D
    Member

    Oh, the responsive one you linked…it’s a trick.

    The element itself is responsive but the pseudeo-elements borders that make the triangle are actually huge.

    The reason you can’t see most of those border is because of overflow:hidden. If you turn that off, you can see where the rest of the border is.

    http://jsfiddle.net/3HG6d/1385/

    #205092
    Paulie_D
    Member

    im trying to figure out how to change those fixed sizes so its responsive YET conforms to the PSD ‘pixel perfect’ mockup

    Can’t tell you without seeing what you are trying to do.

    Pixel perfect was a thing some time ago….not so much any more.

    Frankly, pixel perfection in all browsers is nigh on impossible and for the vast majority of your audience, irrelevant.

    It’s really only developers who run more than one browser at a time and users who do are well aware that each of them have different ways of rendering.

    #205374
    alxfyv
    Participant

    I think I have an answer for you.

    For the HTML and CSS, see this Pen at CodePen.

    For the rationale behind the markup and CSS, click on the “Details” link at the bottom left in the footer and visit the cited sources.

    Note: I’ve tested the Pen on my MacBook Air, iPad Air and iPhone 5 using Chrome and Safari. It’s responsive with one exception. On the iPhone 5, at the bottom of the screen, CodePen has a setting not seen on the iPad Air or the MacBook Air: view the Pen at 0.25x, 0.5x and 1x. At 0.25x and 0.5x .tri-top-right is responsive. At 1x it is not. Why this is so and how to fix it I have not figured out.

    #205375
    Paulie_D
    Member

    That depends on what problem you are trying to solve.

    Let’s shoot the biggest elephant first…we now have a div in the HTML that’s only for styling…now it’s just my opinion but that’s generally a no-no in my book.

    Secondly, it’s not responsive because it relies on fixed border widths…

    .tri-top-right::before {
        content:'';
        display: block;    
        border-top: 500px solid black;
        border-left: 500px solid transparent;
        position: absolute;
        top: 0;
        right: 0;
    }
    

    If you could use % border sizing as I mentioned above you’d be golden…but you can’t…because they don’t exist.

    #205391
    alxfyv
    Participant

    Hmmm …

    It took the shooting of two elephants but I see and understand. Thanks @Paulie_D for taking the time to explain.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.