I am trying to achieve a transparent border

HTML-CSS
1

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
https://codepen.io/DVGY/full/VwYGbaR

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

83310bf98997728b8a7700e3729eb8c3
83310bf98997728b8a7700e3729eb8c31600×1200 1.37 MB

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:

2

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.

https://www.w3schools.com/cssref/pr_background-blend-mode.asp

3

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

4

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?

image
image1600×1200 1.39 MB

5

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

Here what i want to do …

Untitled
Untitled1440×900 255 KB

Can you help me ?

6

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

7

Wait i will show what i actually want…

This is what i have:

Untitle2d
Untitle2d1440×900 207 KB

This is what i want:

Untitled
Untitled1440×900 245 KB

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

8

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:

image
image1363×667 193 KB

9

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

10

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

11