CodePenネタです。
CSSだけでミニマルな感じ(?)のフリーザを描く方法です。
需要あるか分かりませんけど…。
HTMLはPug、CSSはSassを使っています。

サンプル

See the Pen Pure CSS Minimalist Frieza by Renato Pereira (@renatoPereira) on CodePen.

HTML(Pug)

.frieza
  .cabeca
  .orelha.esquerda
  .orelha.direita

  .queixo
    .sub

  .area-olhos
    .circulo.esquerda
    .preenchimento.esquerda

    .circulo.direita
    .preenchimento.direita

    .olho.esquerda
    .olho.direita

    .linha.esquerda
    .linha.direita

CSS(Sass)

$c-sky: #ffdbc5

$c-shadow: rgba(180, 166, 227, 1)
$c-skin: rgba(232, 242, 243, 1)
$c-bg: rgba(65, 54, 112, 1)

body
  background-color: $c-bg
  // background-image: radial-gradient( circle at left top, white 10%, transparent 20%)
  background-position: 0 0
  background-repeat: no-repeat

*
  box-sizing: border-box

.frieza
  height: 308px
  left: 50%
  position: absolute
  top: 50%
  transform: translate(-50%, -50%)
  width: 290px

.cabeca
  border-color: $c-shadow
  border-style: solid
  border-width: 0 28px 0 0
  border-radius: 50%
  height: 220px
  left: 36px
  position: absolute
  top: 0
  transform: rotate(-10deg)
  width: 230px

  &:after
    background-color: $c-shadow
    border-radius: 50%
    content: ''
    display: block
    height: 50px
    position: absolute
    right: 3px
    top: 48px
    transform: rotate(-19deg)
    width: 26px

.orelha.esquerda
  border-radius: 6px 0 0 6px
  background-color: $c-skin
  height: 61px
  left: 4px
  position: absolute
  top: 163px
  transform: rotate(-19deg)
  width: 34px

  &:before
    border: solid transparent
    border-bottom-color: $c-skin
    border-width: 0 0 23px 34px
    bottom: 59px
    content: ''
    display: block
    height: 0
    left: 0
    position: absolute
    width: 0

  &:after
    border: solid transparent
    border-top-color: $c-skin
    border-width: 23px 0 0 34px
    content: ''
    display: block
    height: 0
    left: 0
    position: absolute
    top: 59px
    width: 0

.orelha.direita
  border-radius: 0 6px 6px 0
  background-color: $c-skin
  height: 61px
  position: absolute
  right: 5px
  top: 163px
  transform: rotate(19deg)
  width: 34px

  &:before
    border: solid transparent
    border-bottom-color: $c-skin
    border-width: 0 33px 23px 0
    bottom: 59px
    content: ''
    display: block
    height: 0
    left: 0
    position: absolute
    width: 0

  &:after
    border: solid transparent
    border-top-color: $c-skin
    border-width: 23px 33px 0 0
    content: ''
    display: block
    height: 0
    left: 0
    position: absolute
    top: 59px
    width: 0

.queixo
  background-color: $c-skin
  border-radius: 0 0 5px 5px
  bottom: 25px
  height: 35px
  left: 81px
  position: absolute
  width: 130px

  &:before
    border: solid transparent
    border-top-color: $c-skin
    border-width: 32px 0 0 17px
    content: ''
    display: block
    height: 0
    position: absolute
    right: 100%
    top: 0
    width: 0

  &:after
    border: solid transparent
    border-top-color: $c-skin
    border-width: 32px 17px 0 0
    content: ''
    display: block
    height: 0
    left: 100%
    position: absolute
    top: 0
    width: 0

  .sub
    background-color: $c-skin
    border-radius: 2px 0 2px 10px
    display: block
    height: 102px
    left: 32px
    position: absolute
    top: -16px
    transform: rotate(-23.5deg) skewX(45deg) scale(1, 0.5)
    width: 66px

.area-olhos
  background-color: $c-skin
  border-radius: 0 0 20px 20px
  bottom: 58px
  height: 87px
  left: 47px
  position: absolute
  width: 195px

  &:before
    border: solid transparent
    border-top-color: $c-skin
    border-width: 72px 0 0 20px
    content: ''
    display: block
    height: 0
    position: absolute
    right: 100%
    top: 0
    width: 0

  &:after
    border: solid transparent
    border-top-color: $c-skin
    border-width: 72px 20px 0 0
    content: ''
    display: block
    height: 0
    left: 100%
    position: absolute
    top: 0
    width: 0

  .circulo.esquerda
    background-color: $c-skin
    border-radius: 5px 70px 10px 70px
    bottom: 80px
    display: block
    height: 70px
    left: -34px
    position: absolute
    transform: rotate(18deg)
    width: 66px

    &:before
      border: solid transparent
      border-bottom-color: $c-skin
      border-radius: 10px 0 0 0
      border-width: 0 16px 41px 0
      content: ''
      display: block
      height: 0
      left: 11px
      position: absolute
      top: 30px
      transform: rotate(-25deg)
      width: 0

  .preenchimento
    border: solid transparent
    border-bottom-color: $c-skin
    border-radius: 0 10px 0 0
    border-width: 0 50px 30px 0
    bottom: 86px
    content: ''
    display: block
    height: 0
    left: 20px
    position: absolute
    width: 0

    &:before
      border: solid transparent
      border-bottom-color: $c-skin
      border-radius: 0px 0px 5px 5px
      border-width: 0 30px 15px 30px
      content: ''
      display: block
      height: 0
      left: -22px
      position: absolute
      top: 0
      transform: rotate(230deg)
      width: 0

    &:after
      border: solid transparent
      border-bottom-color: $c-skin
      border-radius: 0px 0px 5px 5px
      border-width: 0 20px 10px 20px
      content: ''
      display: block
      height: 0
      left: 30px
      position: absolute
      top: 26px
      transform: rotate(197deg)
      width: 0

  .preenchimento.direita
    left: initial
    right: 20px
    transform: rotateY(180deg)

  .circulo.direita
    background-color: $c-skin
    border-radius: 5px 70px 10px 70px
    bottom: 80px
    display: block
    height: 70px
    position: absolute
    right: -34px
    transform: rotate(72deg)
    width: 66px

    &:after
      border: solid transparent
      border-bottom-color: $c-skin
      border-radius: 0 10px 0 0
      border-width: 0 0 50px 17px
      content: ''
      display: block
      height: 0
      right: 7px
      position: absolute
      top: 1px
      transform: rotate(-55deg)
      width: 0

.olho.esquerda
  border-radius: 0 6px 0 0
  border: 2px solid $c-bg
  border-width: 3px 5px 2px 4px
  bottom: 24px
  height: 23px
  left: 35px
  position: absolute
  transform: rotateZ(11deg) rotateX(40deg) skew(51deg)
  transform-origin: left bottom
  width: 51px

.olho.direita
  border-radius: 6px 0 0 0
  border: 2px solid $c-bg
  border-width: 3px 5px 2px 4px
  border-width: 3px 4px 2px 5px
  bottom: 14px
  height: 23px
  position: absolute
  right: 27px
  transform: rotateZ(-11deg) rotateX(40deg) skew(-51deg)
  transform-origin: left bottom
  width: 51px

.linha.esquerda
  background-color: $c-bg
  height: 54px
  left: 51px
  position: absolute
  top: 75px
  transform: rotate(-16deg)
  transform-origin: left top
  width: 1px

  &:before
    background-color: $c-bg
    bottom: 100%
    content: ''
    display: block
    height: 10px
    left: 0
    position: absolute
    transform: rotate(35deg)
    transform-origin: left bottom
    width: 1px

  &:after
    background-color: $c-bg
    content: ''
    display: block
    height: 12px
    left: 0
    position: absolute
    top: 100%
    transform: rotate(-26deg)
    transform-origin: left top
    width: 1px

.linha.direita
  background-color: $c-bg
  height: 54px
  position: absolute
  right: 44px
  top: 75px
  transform: rotate(16deg)
  transform-origin: right top
  width: 1px

  &:before
    background-color: $c-bg
    bottom: 100%
    content: ''
    display: block
    height: 9px
    left: 0
    position: absolute
    transform: rotate(-35deg)
    transform-origin: left bottom
    width: 1px

  &:after
    background-color: $c-bg
    content: ''
    display: block
    height: 12px
    left: 0
    position: absolute
    top: 100%
    transform: rotate(26deg)
    transform-origin: left top
    width: 1px

参考

おきもちを投稿する

* が付いている項目は必須です。