JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="outer">
<div class="cornered"></div>
<div class="main">kjkjkjkj</div>
   <div class="cornered2"></div>
<div class="main2"></div>
</div>

CSS

body {
  background: yellow;
}

.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid #fff;
    border-left: 40px solid transparent;
    position: absolute;
    top:10px; left: 2px;
}
.main {
    width: 200px;
    height: 200px;
    background-color: #fff;
    padding: 0 8px;
    position: absolute;
    top:50px;left:2px;
}
.cornered2 {
    width: 186px;
    height: 0px;
    border-bottom: 40px solid blue;
    border-left: 40px solid transparent;
    position: absolute;
    z-index: -99999;
    top:0px;
}
.main2 {
    width: 210px;
    height: 210px;
    background-color: blue;
    padding: 0 8px;
    position: absolute;
    z-index: -99999;
    top:40px;
}