Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Diagonal svg background image

I've been trying to get a certain effect on a design I am creating, but I'm running into difficulties. Not sure if there is anyone that can point me in the right direction or give some solid guidance.

I'm basically splitting the section of the design with diagonal sections. Now I could do this with some png's but I was hoping to go the route with svg's or masks ideally to make the responsive design easier. If anyone knows of the best way to use this method any help would be great.

This is sort of what I'm aiming for

Many thanks

Sueanna Post
Sueanna Post
2,163 Points

I am very interested in seeing this design, but the link above just shows nothing but "There doesn't seem to be any files here".

Thanks

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Sorry Sueanna Post - Hopefully this time it's more successful

Diagonal

4 Answers

james white
james white
78,399 Points

Some other clip path masking links along the same lines as Jeff's:

http://www.html5rocks.com/en/tutorials/masking/adobe/

http://jsfiddle.net/rhernando/fFJ29/

http://cssplant.com/clip-path-generator

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

You are my hero! I managed to knock up a small test here on Codepen Many many thanks!!

Jeff Pierce
Jeff Pierce
18,077 Points
Jeff Pierce
Jeff Pierce
18,077 Points

Perhaps this is what you are looking for: https://css-tricks.com/clipping-masking-css/

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Cheers buddy, that is a great article. I also found on it this link - Clippy

Sueanna Post
Sueanna Post
2,163 Points
Sueanna Post
Sueanna Post
2,163 Points

beautiful design

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

That's just a rough outline, but thank you :)

I was aiming for classy Hackett / Hugo Boss style :)

Sueanna Post
Sueanna Post
2,163 Points
Sueanna Post
Sueanna Post
2,163 Points

Well that would do it. Very classy.