Clip path

Sometimes the designer went a little bit more creative, and now you have to put an image in a specific shape, like the triangle or other. For this, you could use clip-path property! Let’s take a quick look at how it works: HTML Code: <div class="ellipse"> <img src="https://upstacksolutions.com/wp-content/uploads/2020/04/css-tricks.jpg" /> </div> <div class="circle">  <img src="https://upstacksolutions.com/wp-content/uploads/2020/04/css-tricks.jpg" /> </div> <div class="polygon"> <img src="https://upstacksolutions.com/wp-content/uploads/2020/04/css-tricks.jpg" /> </div> CSS Code: .ellipse img {  clip-path: ellipse(200px 200px at 100px 100px); } .circle img {  clip-path: circle(30%);   } .polygon img {  clip-path: polygon(5% 5%, 100% 10%, 900% 75%, 75% 75%, 75% 100%, 60% 75%, 20% 80%); } Result: ellipse circle polygon