JSFiddle - React, Tailwind, and code Playground

by Dru Dro

HTML

<div>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</div>

SCSS

body {
  background: #F6F6F6;
  padding:100px;
}
div {
  width:300px;
  border: 1px solid #E6EAEE;
  border-top:0;
  position:relative;
  &:before,&:after {
    content:"";
    display:block;
    position:absolute;
  }
  &:after {
    width:50%;
    height:0;
    border:1px solid #E6EAEE;
    border-top:0;
    border-right:0;
    right:20px;
    top:-40px;
    height:40px;
    transform:skew(40deg)
  }
  &:before {
    width:calc(50% - 40px);
    height: 40px;
    border: 1px solid #E6EAEE;
    border-bottom:0;
    border-right:0;
    left:0;
    top:-40px;
  }
}