Masked logo with different color

by Kenneth Luplau-Brøgger

HTML

<div class="container">
  <div class="ribbon red">
    <div class="wrap">
      <div class="logo white"></div>
    </div>
  </div>
  <div class="ribbon blue">
    <div class="wrap">
      <div class="logo pink"></div>
    </div>
  </div>
  <div class="ribbon orange">
    <div class="wrap">
      <div class="logo black"></div>
    </div>
  </div>
</div>

SCSS

.container {
  overflow: hidden;
  position: relative;
  
  .ribbon {
    position: relative;
    height: 100vh;
    
    .wrap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      clip: rect(0, auto, auto, 0);
    }
    
    &.red {
      background: red;
    }
    
    &.orange {
      background: orange;
    }
    
    &.blue {
      background: blue;
    }
  }
}


.logo {
  width: 100px;
  height: 50px;
  position: fixed;
  top: 50px;
  left: 50px;

  &.black {
    background: black;
  }

  &.pink {
    background: #ff00ab;
  }

  &.white {
    background: white;
  }
}