<twitch></twitch>
<a href="https://youtu.be/c5YDBfUHqVY" target="blank"><img src="https://assets.codepen.io/2475719/youtube-logo.png" /></a>
:root{
--twitch-purple:#6441A4;
--bg-gradient:rgba(0,0,0,0.2) 5px, transparent 5px;
}
*{
margin:0;
}
body{
width:100vw;
height:100vh;
display:grid;
place-items:center;
filter:
drop-shadow(0 0 2px white)
drop-shadow(0 0 2px white)
drop-shadow(0 5px 3px black)
drop-shadow(0 5px 5px black);
background:
linear-gradient(225deg,var(--bg-gradient)),
linear-gradient(-225deg,var(--bg-gradient)),
linear-gradient(135deg,var(--bg-gradient))5px 5px,
linear-gradient(-135deg,var(--bg-gradient))-5px -5px,
radial-gradient(beige, var(--twitch-purple));
background-size:
20px 10px,
20px 10px,
20px 10px,
20px 10px,
100% 100%;
}
twitch{
width:400px;
height:410px;
background:
radial-gradient(circle at 56% 40%, transparent 35%, var(--twitch-purple) 35%)0 0,
linear-gradient(90deg,transparent 62%, var(--twitch-purple) 60%)5px;
background-size:
100% 100%,
100px 190px;
clip-path:polygon(
/* outer-shape */
100% 0,
100% 62%,
72% 88%,
52% 88%,
40% 100%,
25% 100%,
25% 88%,
0 88%,
0 17%,
7% 0,
100% 0,
/* middle-shape */
90% 10%,
16% 10%,
16% 72%,
37% 72%,
37% 84%,
50% 72%,
75% 72%,
90% 57%,
90% 10%,
/*inner-shape*/
75% 25%,
75% 53%,
40% 53%,
40% 25%,
75% 25%
);
}
a {
width: 100px;
height: 75px;
position: absolute;
bottom: 10px;
right: 10px;
}
img {
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.