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

Question

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;
}

Hey mate, thanks for answering, edited the question. Do you understand my problem? should i be more spesific? have tried so many variations by now — kristoffer berntsen, Oct 07 '16 at 12:36
I think the image should be `position: absolute;` which you already have, and the grey triangle should be `position: relative;` and be put inside the images div. this way you can give the grey triangle a width and height of 100%, which will adjust to the images width/height. — Roy123, Oct 07 '16 at 12:38
Im not a 100% sure this works thats why i didnt post it as an answer — Roy123, Oct 07 '16 at 12:39
Please check this link:-https://css-tricks.com/snippets/css/css-triangle/ — Razia sultana, Oct 07 '16 at 12:39
please make an [MCVE](http://stackoverflow.com/help/mcve) as you link is "temporary". Your question will be obsolete once you change your page. — web-tiki, Oct 07 '16 at 12:41

score 2 · Accepted Answer · answered Oct 07 '16 at 12:54

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;
    }
}

score 0 · Answer 2 · answered Oct 07 '16 at 12:38

0

Here is your css edited. Just replace the 100vw by the value you need

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

answered Oct 07 '16 at 12:38

Weedoze

13,683
1
33
63

Doesn't work for smaller screen sizes, the border is supposed to be as wide as the image, so a fixed border-width won't work. – Paul Oct 07 '16 at 12:41
Yes thanks, tried that earlier also. Just figuerd out i can do: @media(min-width:1200px){ .content-type-homepage .grid-section-article-wide .grid-rte { border-right: 1200px solid transparent; } } – kristoffer berntsen Oct 07 '16 at 13:18
So that solved it if it isn't bad practice or anything :) – kristoffer berntsen Oct 07 '16 at 13:18
@kristofferberntsen so just completely missed my answer with what you said you did in the end? :( boooo :P – Stewartside Oct 07 '16 at 14:18
@Stewartside Saw that now, crazy. Had a lecture today at the school on the bootstrap grid subject, so i learned it just when i posted. Not trying to take credit for your answer, thanks for the help :) – kristoffer berntsen Oct 07 '16 at 14:33

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

2 Answers2