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

HTML HTML Basics Going Further with HTML Next Steps

Matej Milkovski
PLUS
Matej Milkovski
Courses Plus Student 839 Points
Posted by Matej Milkovski
Matej Milkovski
Courses Plus Student 839 Points

Im very curies about The picture shape of the web page ?

I get to the last course of the HTML i sow the teacher CSS nad hTML site, my question is how he made the curve at the bottom of the Img, i try to find some info on google but nothing

THanks

5 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Matej Milkovski,

One of the quickest ways you can create that effect is like this. :)

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

That doesn't appear to be curved to me. But it is angled. That is probably done with another CSS property called "transform". There are quite a few ways to use that one, but one possible way to create that effect would be with a "skew" setting.

You might enjoy the CSS Transitions and Transforms course which covers this and even more amazing effects you can create.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Straight from source! I'd forgotten about "clip-path", but that's a bit easier, particularly now that I know about the "Clippy" CSS clip-path maker tool!

That went directly into my bookmarks. :wink:

But it might be worth noting that according to "Can I Use?", clip-path isn't nearly as well supported in browsers as transform is.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

You mean the photo in a circle? That's done with a CSS property called "border-radius". If you set it to 50% or more on a square element it will become a circle. For example, this CSS rule will make every image on the page either a circle or oval:

img { border-radius: 50%; }
Matej Milkovski
PLUS
Matej Milkovski
Courses Plus Student 839 Points
Matej Milkovski
Matej Milkovski
Courses Plus Student 839 Points

@steven No no the rectangle blue IMG on the top of the site (header place) ? you can see on the bottom of the site there is a curve line,

here is a screenshot https://imgur.com/a/aG7QV https://imgur.com/a/06sXa

thanks