JSFiddle - React, Tailwind, and code Playground

by Alexander Sevirinov

HTML

<div class="box">
  <span class="mask mask-left"></span>
  <span class="mask mask-right"></span>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, consequuntur quae unde aliquam quo earum odio, at pariatur dolor dicta assumenda nobis laudantium perferendis, maiores quidem praesentium? Odit, ab autem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, consequuntur quae unde aliquam quo earum odio, at pariatur dolor dicta assumenda nobis laudantium perferendis, maiores quidem praesentium? Odit, ab autem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, consequuntur quae unde aliquam quo earum odio, at pariatur dolor dicta assumenda nobis laudantium perferendis, maiores quidem praesentium? Odit, ab autem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, consequuntur quae unde aliquam quo earum odio, at pariatur dolor dicta assumenda nobis laudantium perferendis, maiores quidem praesentium? Odit, ab autem!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, consequuntur quae unde aliquam quo earum odio, at pariatur dolor dicta assumenda nobis laudantium perferendis, maiores quidem praesentium? Odit, ab autem!</p>
  </div>
</div>

CSS

body {
  background: lightgray;
}

.box {
  background: white;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: red;
  margin: 50px;
  position: relative;
  padding: 7px 40px 20px;
}

.box .mask {
  position: absolute;
  top: -13px;
  height: 13px;
  border-style: solid;
  border-color: red;
  background: white;
}

.box .mask::before {
  content: '';
  position: absolute;
  top: -1px;
  width: 0;
  height: 0;
  border-bottom: solid 13px red;
}

.box .mask::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-bottom: solid 12px white;
}

.box .mask-left {
  left: 0;
  border-width: 1px 0 0 1px;
  right: 50%;
  margin-right: 13px;
  margin-left: -1px;
}

.box .mask-left:before {
  right: 0;
  margin-right: -13px;
  border-right: solid 13px transparent;
}

.box .mask-left:after {
  right: 1px;
  margin-right: -12px;
  border-right: solid 12px transparent;
}

.box .mask-right {
  right: 0;
  border-width: 1px 1px 0 0;
  left: 50%;
  margin-left: 13px;
  margin-right: -1px;
}

.box .mask-right:before {
  left: 0;
  margin-left: -13px;
  border-left: solid 13px transparent;
}

.box .mask-right:after {
  left: 1px;
  margin-left: -12px;
  border-left: solid 12px transparent;
}