Egghead CSS

egghead.css

*,
*:before,
*:after {
  box-sizing: border-box;
}
:root {
  --size: 50;
  --unit: calc((var(--size) / 769) * 1vmin);
  --specs: #262626;
  --shell-outline: #666;
  --bg: #ffd500;
  --shell: #fff;
}
body {
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.egg {
  height: calc(769 * var(--unit));
  width: calc(742 * var(--unit));
  z-index: 2;
  position: relative;
}
.egg * {
  position: absolute;
}
.egg__shell {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 95%;
  width: 74%;
}
.egg__shell:after,
.egg__shell:before {
  content: '';
  border: calc(22 * var(--unit)) solid var(--shell-outline);
  position: absolute;
  background: var(--shell);
}
.egg__shell:before {
  top: 0;
  left: 50%;
  height: 65%;
  width: 92%;
  transform: translate(-50%, 0%);
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  -webkit-clip-path: inset(0 0 10% 0);
  clip-path: inset(0 0 10% 0);
}
.egg__shell:after {
  bottom: 0;
  width: 100%;
  height: 50%;
  border-radius: 0 0 50% 50%/0 0 78% 78%;
  -webkit-clip-path: inset(15% 0 0 0);
  clip-path: inset(15% 0 0 0);
}
.egg__specs {
  height: 31%;
  width: 95%;
  top: 31%;
  left: 50%;
  transform: translate(-50%, 0);
}
.egg__spec {
  top: 0;
  width: 46%;
  height: 95%;
  transform: rotate(calc(var(--rotate) * 12deg)) rotateY(calc(var(--flip) * 180deg));
  border: calc(44 * var(--unit)) solid var(--specs);
  border-radius: 25% 60% 32% 38%/34% 37% 45% 30%;
}
.egg__spec:after {
  content: '';
  position: absolute;
  height: calc(100% + 88 * var(--unit));
  width: calc(100% + 88 * var(--unit));
  top: calc(-44 * var(--unit));
  left: calc(-44 * var(--unit));
  border: calc(44 * var(--unit)) solid var(--specs);
  border-radius: 25% 60% 32% 38%/34% 37% 45% 30%;
  box-shadow: calc(0 * var(--unit)) calc(25 * var(--unit)) calc(10 * var(--unit)) rgba(0,0,0,0.45) inset, calc(-15 * var(--unit)) calc(25 * var(--unit)) calc(20 * var(--unit)) rgba(0,0,0,0.45);
  -webkit-clip-path: polygon(49% 0, 100% 0, 100% 160%, 90% 160%, 11% 150%, 17% 95%);
  clip-path: polygon(49% 0, 100% 0, 100% 160%, 90% 160%, 11% 150%, 17% 95%);
}
.egg__spec--left {
  --flip: 0;
  --rotate: -1;
  left: 0;
}
.egg__spec--right {
  --flip: 1;
  --rotate: 1;
  right: 0;
}
.egg__spec-bridge {
  height: 64%;
  width: 25%;
  top: 1%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50%/50%;
  border: calc(55 * var(--unit)) solid var(--specs);
  -webkit-clip-path: polygon(10% 0, 90% 0, 90% 50%, 10% 50%);
  clip-path: polygon(10% 0, 90% 0, 90% 50%, 10% 50%);
}
.egg__specs-arm {
  height: 14%;
  width: 90%;
  background: var(--specs);
  left: 50%;
  top: 35%;
  transform: translate(-50%, 0);
  -webkit-clip-path: polygon(-7% 0, 25% 55%, 75% 55%, 107% 0, 100% 79%, 76% 100%, 24% 100%, 0 79%);
  clip-path: polygon(-7% 0, 25% 55%, 75% 55%, 107% 0, 100% 79%, 76% 100%, 24% 100%, 0 79%);
}