Google Translate icon

by Pranab Dey

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main">
<div class="first"><span><i class="fa fa-google"></i></span></div>
</div>

SCSS

$width: 150px;
$height: 150px;
$fBack: #518DF7;
$sBack: #dddedf;
.center{
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

*,*:before,*:after{
  box-sizing: border-box;
}

.main{
  font-family: helvetica; display: grid; height: 100vh;
  .first{
    width: $width; height: $height; position: relative; margin: auto;
    border-radius: 10px 0 0 10px; display: inline-block;
    background: linear-gradient(250deg, transparent 0%, transparent 28%, $fBack 28%);
    span{
      font-size: 70px; color: #efefef; font-weight: 600; left: 40%;
      position: absolute; @extend .center; display: inline-block;
    }
    &:before{
      content: '';
      position: absolute; width: calc(130px / 2); height: calc(150px / 2);
      background: #4352b9; z-index: -1; right: 10px; bottom: -25px;
      transform: rotate(-20deg) skewy(-21deg);
    }
    &:after{
      content: '文'; position: absolute;
      width: calc(130px + 30px); height: inherit;
      z-index: -2; right: -40px; top: 45px; border-radius: 0 10px 10px 0;
      background: linear-gradient(250deg, $sBack 0%, $sBack 70%, transparent 70%);
      text-align: right; display: inline-block; vertical-align: middle;
      line-height: 150px; font-size: 70px; color: #5b73a1; font-weight: 600;
      padding-right: 13px;
    }
  }
}