Important note:

This version is deprecated and will not be supported from 1 May 2018. A new version is available at https://stas-melnikov.ru/books/hctasks/tasks/the-avatar-with-the-clip-path-property/

The avatar with the clip-path property

Demo: https://codepen.io/melnik909/pen/OQzzOX

Task description

Last week I had a job interview. As a test task I had to make the mask for the avatar image.

According to the task I should add the clip-path property for . avatar:after and .avatar__img elements to make the mask the same as a picture.

Guys, do you have idea how to resolve this task?

Why you need to support the project

I want to share my knowledge with you but creating posts takes a long time. Therefore I'm looking for subscribers who will financially support me. Your money will go towards the development of the HCTask project and creating my book about HTML and CSS. Together we can do it. Thank you!

PayPal: https://www.paypal.me/melnik909