I am trying to achieve a transparent border

Tell us what’s happening:
In the below image you can see a white border which goes transparent to bottom-right,
I am trying to achieve the same functionality but i cannot do it.

I have used border-image property but it didn’t give me desired result. I also tried to find it on internet i was unable to find.
Can any one help me here. Please

Look for main-content class and cointainer class in css.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

I don’t believe this is possible with CSS/JS.

Inspect the code from that example you provided. I’d guess its a blend method? Let me know, I could be wrong.


I just have an image :smiley:. I don’t have code for same

I’m actually curious about this, and I might be wrong. it could be a CSS thing?

If red background z=-3 @ (0,0) & white was z=-2

blue z=-1 with background positioned to match red… that might work?

Thats a very good idea. Will it be too complex to make it responsive later??

Here what i want to do …

Can you help me ?

It should still be responsive. I would put your Red div inside of the Green div, and give it negative location for the border thickness. and the height/width would be a percentage of the Green container.

… and since you have a solid background it should be quick… But see if you can get it with an image or ‘shadowed’ background

Wait i will show what i actually want…

This is what i have:

This is what i want:

I have used grid for 3 info showing in main class i am curious how to achieve what i have shown you now

Thanks so much

I’d personally draw my containers like this. I don’t use Grid and stick with just Flexbox mostly but basically close enough :slight_smile:

Will i be able to stack the 3 info when screen width reduces ??

Yup. But you’ll have to figure out how :wink: