toba

/*Downloaded from https://www.codeseek.co/Telio_lefranc/toba-zzxWpq */
    $x: .75rem;
$green: #18bf18;
$c-mat: #b7bfce;
$c-roof: #f1efc6;
$c-hublot: #b9bca2;
$shadowHull: rgba(0,0,0,.65);
#boat {
  position: absolute;
  left: 10*$x;
  #matt {
    position: absolute;
    background-color: $c-mat;
    width: 1.4*$x;
    height: 40*$x;
    left: 23*$x;
    top: -20*$x;
  }
  #roof {
    position: absolute;
    background-color: $c-roof;
    left: 8.5*$x;
    top: 17*$x;
    width: 12*$x;
    height: 3*$x;
    border-radius: 4px 0 0 0;
    &::before {
      position: absolute;
      content: '';
      display: block;
      top: 0;
      left: 100%;
      border-left: 2.5*$x solid $c-roof;
      border-top: 3*$x solid transparent;
    }
    &::after {
      position: absolute;
      content: '';
      display: block;
      bottom: 0;
      height: 50%;
      right: 100%;
      width: 6*$x;
      background-color: $c-roof;
      border-radius: 4px 0 0 0;
    }
  }
  #hublot {
    position: absolute;
    background-color: $c-hublot;
    width: 35%;
    height: 70%;
    top: 15%;
    left: .5*$x;
    border-radius: .75*$x;
    &::before {
      content: '';
      position: absolute;
      display: block;
      background-color: $c-hublot;
      width: 100%;
      height: 100%;
      left: 4.5*$x;
      border-radius: .75*$x;
    }
    &::after {
      content: '';
      position: absolute;
      display: block;
      background-color: $c-hublot;
      width: 3.5*$x;
      height: 100%;
      left: 9*$x;
      border-radius: .75*$x 2*$x .25*$x .75*$x;
    }
  }
  #coque {
    position: absolute;
    width: 39*$x;
    height: 8*$x;
    background-color: $green;
    top: 20*$x;
    &::before {
      content: '';
      position: absolute;
      left: -3*$x;
      height: 6*$x;
      border-top: .25*$x solid transparent;
      border-right: 3*$x solid $green;
      border-bottom: 1.75*$x solid transparent;
      right: 100%;
      
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 100%;
      height: 0;
      width: 0;
      border-right: 6*$x solid transparent;
      border-top: 8*$x solid $green;
      z-index: -1;
    }
    #liston {
      position: absolute;
      top: -.75*$x;
      height: .5*$x;
      width: 2*$x;
      background-color: transparent;
      border-right: 27.5*$x solid orange;
      border-left: 15*$x solid orange;
    }
    #yellowstripe {
      position: absolute;
      top: 1.5*$x;
      left: -3*$x;
      background-color: yellow;
      height: 1.75*$x;
      width: 45.5*$x;
      &::after {
        content: '';
        position: absolute;
        left: 100%;
        width: 1px;
        height: 0;
        border-top: 1.75*$x solid yellow;
        border-right: 1.3*$x solid transparent;
      }
    }
    #orangestripe {
      position: absolute;
      background-color: orange;
      height: .75*$x;
      width: 39*$x;
      bottom: 0*$x;
      &::after {
        content: '';
        position: absolute;
        left: 100%;
        border-top: .75*$x solid orange;
        border-right: .6*$x solid transparent;
      }
      &::before {
        content: '';
        position: absolute;
        right: 100%;
        border-top: .72*$x solid orange;
        border-left: 3.5*$x solid transparent;
        transform-origin: right bottom;
        transform: rotate(18deg);
      }
    }
    #shadow {
      position: absolute;
      background-color: $shadowHull;
      top: 4.5*$x;
      left: -3*$x;
      height: 3.5*$x;
      width: 44.5*$x;
      clip-path: polygon(0 0, 10*$x 1*$x, 25*$x 1.75*$x, 30*$x 1.6*$x, 37*$x 1*$x, 44.5*$x 0, 42*$x 100%, 3*$x 100%, 0 1.75*$x, 0 0)
    }
  }
}

/*Downloaded from https://www.codeseek.co/Telio_lefranc/toba-zzxWpq */