JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="box">
  <div class="box__top">
    <i class="corner"></i>
  </div>
  <div class="box__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea delectus numquam deserunt ut rem veniam, architecto voluptate dolores obcaecati nesciunt explicabo maxime. Est, nesciunt aliquam eaque quasi numquam cumque suscipit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ipsum a, assumenda necessitatibus sunt saepe quas autem, aperiam non veniam, voluptatem doloribus, quisquam minima esse corporis. Expedita exercitationem est dolores.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam distinctio fuga, dolore iure perferendis provident recusandae accusamus, magnam, quisquam pariatur sed temporibus labore reprehenderit natus adipisci officia doloremque nisi minus.</p>
  </div>
</div>

SCSS

$height: 20px;
$width: 20px;
$bg: #fff;

html {
  background: url('http://lorempixel.com/1024/1024/');
  background-size: cover;
}

body {
  padding: 5%;
  background: none;
}

.box {
  &__top {
    display: flex;

    &:before,
    &:after {
      flex: 1;
      content: '';
      background: $bg;
    }
    
    .corner {
      display: block;
      height: $height;
      width: $width;
      position: relative;      
      
      &:before,
      &:after {
        display: block;
        height: $height;
        width: ($width * 1.5);
        position: absolute;
        right: 1px;
        top: ($height * 0.4);
        
        content: '';
        
        transform: rotate(45deg);
        background: $bg;
      }
      
      &:after {
        transform: rotate(-45deg);
        right: auto;
        left: 1px;
      }
    }
  }
  
  &__content {
    padding: 20px;
    background: $bg;
  }
}