kristoffer berntsen kristoffer berntsen - 1 month ago 8
CSS Question

Trying to make a triangle made of borders to stop expanding at 1200px

i wonder if anyone can help, easiest way to show it is the temporary url here: http://norsk-kulturhus-nettverk.a.heltblank.no/

It is the top image. The grey triangle should always follow the image size. Anyone got some tips?

Edit:
Tried this:

.content-type-homepage .grid-section-article-wide .grid-rte {
width: 0;
height: 0;
border-top: 20vw solid rgba(242,242,242, 1);
border-right: 100vw solid transparent;
position: absolute;
top: 0;
z-index: 99;
}

Answer

You could use a media query which finds when the browser hits a certain size and then starts to change the border property.

I have tested this on the URL you gave above and it seems to be working.

.content-type-homepage .grid-section-article-wide .grid-rte {
    width: 0; 
    height: 0; 
    border-top: 20vw solid rgba(242,242,242, 1); 
    border-right: 100vw solid transparent; 
    position: absolute; 
    top: 0; 
    z-index: 99;
}

@media (min-width:1200px) {
    .content-type-homepage .grid-section-article-wide .grid-rte {
        border-right: 1200px solid transparent;
    }
}