JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
  <div class="ribbon">123</div>
</div><br><br><br><br><br><Br><Br><br><br><br><br>
<div class="box2">Lorem ipsum</div>

CSS

.box1{
  background:black;
  width:200px;
  height:200px;
  position:absolute;
  z-index:5;
  overflow:hidden;
}
.box1 .ribbon{
  width:150px;
  height:30px;
  margin-top:20px;
  margin-left:-33px;
  background:white;
  text-align:center;
  transform:rotate(-45deg);
}
.box2{
  width:200px;
  height:200px;
  padding:20px;
  color:white;
  background:black;
  background:
        -moz-linear-gradient(45deg,  transparent 15px, black 15px),
        -moz-linear-gradient(135deg, black 10px, black 10px),
        -moz-linear-gradient(225deg, transparent 15px, black 15px),
        -moz-linear-gradient(315deg, black 10px, black 10px);
  background:
        -webkit-linear-gradient(45deg,  transparent 15px, black 15px),
        -webkit-linear-gradient(135deg, black 10px, black 10px),
        -webkit-linear-gradient(225deg, transparent 15px, black 15px),
        -webkit-linear-gradient(315deg, black 10px, black 10px);
 background:
        -o-linear-gradient(45deg,  transparent 15px, black 15px),
        -o-linear-gradient(135deg, black 10px, black 10px),
        -o-linear-gradient(225deg, transparent 15px, black 15px),
        -o-linear-gradient(315deg, black 10px, black 10px);
background:
        linear-gradient(45deg,  transparent 15px, black 15px),
        linear-gradient(135deg, black 10px, black 10px),
        linear-gradient(225deg, transparent 15px, black 15px),
        linear-gradient(315deg, black 10px, black 10px);
     background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}