.hatena_container
  .pen_body
    .pen_top_container
      .pen_top
    .pen_bottom
View Compiled
$size: 200px
$color: #2E2E2E
$pen_body_width: $size * 0.3
$pen_body_height: $size * 0.5
$pen_body_side_width: $size * 0.03
$pen_top_height: $size * 0.3
$pen_top_width: $pen_body_width * 0.1
$pen_top_side_width: (($pen_body_width + ($pen_body_side_width * 2)) - $pen_top_width) / 2 + 0.5 // 少し削れるため、若干はみ出させる
.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: $pen_body_side_width solid transparent
    border-right: $pen_body_side_width solid transparent
    position: absolute
    top: 62%
    left: 50%
    transform: translate(-50%, -50%)
    width: $pen_body_width
    &:before, &:after
      z-index: 1
      content: ' '
      position: absolute
    &:before
      top: -$pen_top_height - $pen_body_height
      width: $pen_top_width
      left: 50%
      transform: translateX(-50%)
      height: $pen_top_height * 1.4
      background: white
    &:after
      $center_size: $pen_top_width * 3
      bottom: $pen_body_height * 0.7
      left: 50%
      width: $center_size
      height: $center_size
      transform: translate(-50%, 50%)
      background: white
      border-radius: 50%
  .pen_top_container
    position: absolute
    overflow: visible
    bottom: $pen_body_height
    left: 50%
    height: $pen_top_height
    transform: translateX(-50%)
    $width: $pen_top_width * 1.5 // この値を大きくすると、ペン先の曲線が大きくなる
    &:before, &:after
      z-index: 1
      position: absolute
      display: inline-block
      content: ' '
      background: white
      height: $pen_top_height * 1.3
      width: $width
      bottom: 0
      border-radius: 50%
      transform-origin: 50% 100%
    &:before
      left: 0
      bottom: 0
      transform: translate(-70% , 0%) rotateZ(28deg)
    &:after
      bottom: 0
      right: 0
      transform: translate(70% , 0%) rotateZ(-28deg)
    .pen_top
      display: inline-block
      width: $pen_top_width
      border-bottom: $pen_top_height solid $color
      border-left: $pen_top_side_width solid transparent
      border-right: $pen_top_side_width solid transparent
  .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.