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