<!-- 
from: https://css-tricks.com/weaving-one-element-over-and-under-another-element/ 
author: @Preethi
-->
<div class="design">
  <!-- Level 01    -->
  <img src="https://images.unsplash.com/photo-1511692277506-3be3a7ab1686" alt="鸟图" />
  <div class="rotated-border"></div>

  <!--  Level 02  -->
  <div class=grid>
    <div data-white></div>
    <div></div>
    <div></div>
    <div data-white></div>
  </div>
  
  <!-- Levle 03   -->
  <div class=blend>
    <img src="https://images.unsplash.com/photo-1511692277506-3be3a7ab1686" alt="鸟图" />
    <div class=grid>
      <div></div>
      <div data-white></div>
      <div data-white></div>
      <div></div>
    </div>
  </div>
</div>

@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
    background-size: cover;
    background-position: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 2rem;
    background-blend-mode: multiply,screen, overlay;
}

// Step01
.design {
  position: relative;
  height: 300px;
  width: 300px;
}

.design > * {
  position: absolute;
  height: 100%;
  width: 100%;
}

.rotated-border {
  box-sizing: border-box;
  border: 15px #eb311f solid;
  transform: rotate(45deg);
  box-shadow: 0 0 10px #eb311f, inset 0 0 20px #eb311f;
}

// Step02
.grid { 
  display: grid; 
  grid: repeat(2, 1fr) / repeat(2, 1fr); 
}

[data-white]{ 
  background-color: white; 
}

// Step03
.blend > * {
  position: absolute;
  height: 100%;
  width: 100%;
}

.blend { 
  mix-blend-mode: multiply; 
}