.hatena_container
  .pen_body
    .pen_top
    .pen_bottom
View Compiled
$size: 200px
$color: #2E2E2E
$pen_body_width: $size * 0.25
$pen_body_height: $size * 0.4
$pen_top_height: $size * 0.3
$width_offset: 0.11
$pen_top_width: $pen_body_width * (1 + ($width_offset * 2))
.hatena_container
  position: relative
  height: $size
  width: $size
  border: $size * 0.08 solid $color
  border-radius: 50%
  .pen_body
    border-top: $pen_body_height solid $color
    border-left: $size * 0.03 solid transparent
    border-right: $size * 0.03 solid transparent
    position: absolute
    top: 60%
    left: 50%
    transform: translate(-50%, -50%)
    width: $pen_body_width
    &:before, &:after
      z-index: 1
      content: ' '
      position: absolute
    &:before
      bottom: $pen_body_height * 0.8
      width: $pen_top_width * 0.1
      left: 50%
      transform: translateX(-50%)
      height: $pen_top_height * 1.5
      background: white
    &:after
      $height: $pen_top_width * 0.3
      bottom: $pen_body_height * 0.8
      left: 50%
      width: $height
      height: $height
      transform: translate(-50%, 50%)
      background: white
      border-radius: 50%
  .pen_top
    display: inline-block
    position: absolute
    overflow: hidden
    bottom: $pen_body_height
    left: -$pen_body_width * $width_offset
    width: $pen_top_width
    height: $pen_top_height
    background: $color
    &:before, &:after
      position: absolute
      display: inline-block
      content: ' '
      background: white
      height: $pen_top_height * 10
      width: $pen_top_width * 2.1
      bottom: 0
      border-radius: 0 0 50% 50% / 0 0 100% 100%
    &:before
      left: 0
      transform: translateX(-50%)
    &:after
      right: 0
      transform: translateX(50%)
  .pen_bottom
    position: absolute
    top: 100%
    background: $color
    $height: $size * 0.05
    $width: $pen_body_width
    width: $width
    height: $height
    border-radius: 0 0 #{$width / 2} #{$width / 2} / 0 0 #{$height} #{$height}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.