<div class="box">
<img src="https://css-articles.com/img/avatar.png" alt="a random avatar">
<h2>Temani Afif</h2>
<p>Expert CSS Hacker</p>
</div>
@property --a {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
.box {
--r: 30px; /* control the rounded part*/
--s: 80px; /* control the size of the cut and the image */
--a: 20deg; /* control the depth of the curvature */
position: relative;
z-index: 0;
cursor: pointer;
transition: .4s --a;
color: #fff;
font-family: system-ui,sans-serif;
text-align: center;
}
.box:hover {
--a: 35deg;
}
.box img {
height: calc(2*var(--s));
aspect-ratio: 1;
scale: .9;
translate: 0 calc(-1*sin(var(--a))*var(--s) - sin(var(--a))*var(--r));
border-radius: 50%;
background: #D95B43;
}
.box:before {
content:"";
position: absolute;
z-index: -1;
inset: calc(var(--s)/2 + var(--r)/4) 0 0 0;
background: linear-gradient(45deg,#00A0B0,#88A65E);
--_m:0/calc(2*var(--r)) calc(2*var(--r)) no-repeat
radial-gradient(50% 50%,#000 calc(100% - 1px),#0000);
--_d:(var(--s) + var(--r))*cos(var(--a));
mask:
calc(50% + var(--_d)) var(--_m),calc(50% - var(--_d)) var(--_m),
radial-gradient(var(--s) at 50% calc(-1*sin(var(--a))*var(--s)),
#0000 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(1 - sin(var(--a)))) no-repeat,
linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(50% + var(--_d)),#000 0);
}
body {
margin: 0;
background: repeating-linear-gradient(-45deg, #fff 0 20px, #ddd 0 40px);
padding-top: 100px;
}
h2 {
margin-block: calc(var(--s)/-3) 0;
font-size: 3rem
}
p {
font-size: 1.5rem;
margin: 0;
padding: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.