Как сделать маску в css?

.wrapper { 
    display: inline-block; 
    padding: 0 40px 20px 0; 
    background-color: #fff; 
} 
 
.box { 
    position: relative; 
    width: 150px; 
    height: 150px; 
    background-color: rgb(0, 0, 255); 
} 
 
.box::after { 
    content: '2'; 
    position: absolute; 
    font: 700 150px/0 'Teko', sans-serif; 
    right: 0; 
    bottom: 0; 
    margin: auto -35px 25px auto; 
    color: rgb(255, 255, 0); 
    mix-blend-mode: difference; 
    z-index: 2; 
}

<link href="https://fonts.googleapis.com/css?family=Teko:700" rel="stylesheet"> 
<div class="wrapper"> 
    <div class="box"></div> 
</div>

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: #2b2b2b; 
  color: white; 
} 
 
#main-wrapper { 
  width: 100%; 
  height: 100%; 
} 
 
.main-wrap-mask { 
  position: relative; 
  width: 300px; 
  height: 300px; 
} 
 
.layer-down { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
} 
 
.layer-up, 
.layer-down { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
} 
 
.layer-up:after, 
.layer-down:after { 
  position: absolute; 
  display: block; 
  width: 100%; 
  height: 100%; 
  font-family: fantasy; 
  font-size: 250px; 
  content: '2'; 
  color: white; 
  background: transparent; 
  top: 25%; 
  left: 45%; 
} 
 
.layer-up { 
  background: blue; 
  overflow: hidden; 
} 
 
.layer-down:after { 
  color: blue; 
}

<div id="main-wrapper"> 
  <div class="main-wrap-mask"> 
    <div class="layer-down"></div> 
    <div class="layer-up"></div> 
  </div> 
</div>

.block { 
  background: blue; 
  width: 200px; 
  height: 200px; 
  padding: 20px; 
  font: 30px/1.2 sans-serif; 
  color: white; 
  position: relative; 
} 
 
.block:before, 
.block:after { 
  content: attr(data-number); 
  display: block; 
  position: absolute; 
  bottom: 0; 
  right: 0; 
  font-size: 150px; 
  font-weight: bold; 
  text-align: center; 
  line-height: 1; 
  width: 50px; 
  height: 100px; 
} 
 
.block:before { 
  color: blue; 
} 
 
.block:after { 
  overflow: hidden; 
}

<div class="block" data-number="2"> 
  Бла 
  <br>Бла 
  <br>Бла 
</div>