<div></div>
<!-- Single-div skull illustration -->
<span>
<a href="https://www.albertwalicki.com/fall-in-love-with-single-div-images"> Tutorial on how to create single-div illustrations<a>
</span>
body {
background-color: grey;
min-height: 100vh;
display: flex;
align-items:center;
justify-content: center;
}
div {
--forehead: radial-gradient(#000 50%, transparent 50%) -53px -48px / 351px 355px;
--hide-forehead:linear-gradient(grey, grey) 0 174px / 245px 81px;
position: relative;
width: 245px;
height: 335px;
background:
var(--hide-forehead),
var(--forehead);
background-repeat: no-repeat;
}
div::before {
--left-eye: radial-gradient(#fff 50%, transparent 50%) 21px 0px / 70px 70px;
--right-eye: radial-gradient(#fff 50%, transparent 50%) 154px 0px / 70px 70px;
--right-nose: linear-gradient(65deg, #fff 50%, transparent 19%) 124px 63px / 20px 40px;
--left-nose: linear-gradient(-65deg, #fff 50%, transparent 19%) 100px 63px / 20px 40px;
--face: linear-gradient( #000, #000 ) 0px 0px / 245px 130px;
content: '';
width: 245px;
height: 130px;
border-bottom-right-radius: 70%;
border-bottom-left-radius: 70%;
position: absolute;
top: 112px;
left:0;
background:
var(--left-nose),
var(--right-nose),
var(--right-eye),
var(--left-eye),
var(--face);
z-index: 2;
background-repeat: no-repeat;
}
div::after {
--jaw: linear-gradient(#000, #000) 0 0 / 245px 120px;
--tooth-one: linear-gradient(#fff, #fff) 28px 46px / 20px 40px;
--tooth-two: linear-gradient(#fff, #fff) 52px 46px / 20px 40px;
--tooth-three: linear-gradient(#fff, #fff) 76px 46px / 20px 40px;
--tooth-four: linear-gradient(#fff, #fff) 100px 46px / 20px 40px;
content: '';
width: 145px;
height: 84px;
border-bottom-right-radius: 70%;
border-bottom-left-radius: 70%;
position: absolute;
bottom: 24px;
left: 50px;
background:
var(--tooth-one),
var(--tooth-two),
var(--tooth-three),
var(--tooth-four),
var(--jaw);
background-repeat: no-repeat;
z-index: 3;
}
span {
position: absolute;
background: #fff;
bottom:0;
right:0;
padding: 4px 10px;
font-family: arial;
}
span a {
color: #000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.