<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.