Recreating Cut-Corner Photo Effect with CSS

Recreating Cut-Corner Photo Effect with CSS

Kevin Powell via YouTube Direct link

- Using pseudo-elements for the shadows

5 of 11

5 of 11

- Using pseudo-elements for the shadows

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Recreating Cut-Corner Photo Effect with CSS

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - I’ve got new Merch
  3. 3 - The tricky part we’re trying to copy
  4. 4 - The easy parts
  5. 5 - Using pseudo-elements for the shadows
  6. 6 - Trying and failing to hide the corners
  7. 7 - Giving up and looking at Alvaro’s code
  8. 8 - Setting up the clip path
  9. 9 - Setting up the fake border on the image
  10. 10 - Setting up the fake shadow
  11. 11 - Improving the look of it

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.