JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div class="container">
  <div class="logo">
    <div class="logo__star">
      
      <div class="logo__star-rect logo__star-rect--top"></div>
      <div class="logo__star-rect logo__star-rect--right"></div>
      <div class="logo__star-rect logo__star-rect--bottom"></div>
      <div class="logo__star-rect logo__star-rect--left"></div>
    </div>

    <div class="logo__ellipse"></div>
  </div>
  <img src="https://res-2.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_200,w_200,f_auto,q_auto:eco/n2ai1cf1n4yz0gj7nx2i" alt="" class="outline">
</div>

SCSS

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

.container {
  border: 1px solid #f0f0f0;
  min-height: 200px;
  margin: 20px;
  position: relative;
  background-color: #888;
}

.outline {
  position: absolute;
  background-color: #fff;
  opacity: 0;
  transition: 5s opacity linear;
  &:hover {
    /* opacity: 1; */
  }
}

$height: 135px;
$width: $height * 1;
$ellipse_border_width: $height * 0.05;
$color: #4891a9;
$color: indigo;

.logo {
  &:hover {
    transition: 5s all linear;
    width: $width * 3.5;
  }
  position: absolute;
  top: 33px; left: 19px;
  height: $height;
  width: $width;
  /* border: 2px solid; */
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
  &__ellipse {
    height: 60%;
    width: 60%;
    border-radius: 50%;
    border: $ellipse_border_width solid white;
    z-index: -1;
  }
  
  &__star {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  &__star-rect {
    backface-visibility: hidden;
    position: absolute;
    border: 2px solid black;
    $w: 0%; $h: $w;
    width: calc(50% - #{$w}); height: calc(50% - #{$h});
    /* background-color: $color; */
    
    &:hover {
      background-color: orange;
    }
    $skew: 9deg; $rad: 15%;
    &--top {
      border-radius: 0 0 $rad 0;
      top: 0; left: 0;
      transform: skew(-$skew, -$skew);
    }
    &--right {
      border-radius: 0 0 0 $rad;
      top: 0; right: 0;
      transform: skew($skew, $skew);
    }
    &--bottom {
      border-radius: 0 $rad 0 0;
      bottom: 0; left: 0;
      transform: skew($skew, $skew);
    }
    &--left {
      border-radius: $rad 0 0 0;
      bottom: 0; right: 0;
      transform: skew(-$skew, -$skew);
    }
  }
}