Rounded shapes are back in fashion! Specifically, pill shaped forms are really hot right now, as can be seen on Icelandic Explorer for example:
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/03/iceland.jpg)
On Gucci Beauty you can see many rounded shapes, especially rounded cards:
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/03/Gucci-Beauty.jpg)
Window-like shapes are also super trendy, as can be seen in this beautiful poster design by Ana Sakac:
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/03/ana.jpg)
Another example is this great design by mashiqo:
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/03/cauca2.jpg)
I recently also stumbled across this beautiful Dribbble shot by Tyshchuk Maryna:
I thought that this might be somehow possible to do with a clip-path animation, so I started experimenting. It turns out that by using any kind of <basic-shape> you can create a unique look for a slideshow transition, or any other kind of transition, like a hover for example:
As a result, I have created four demos showing some ideas that might spark your inspiration. I really hope you like them!
Here is that pill-shaped look I was after:
![](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/03/ShapeSlideshow.jpg)
Note that for non-supporting browsers, we’ll simply see the slide move without a clip-path applied to it.
Thank you for checking by and hope you enjoy this!
The post Shape Slideshow with Clip-path appeared first on Codrops.