JSFiddle - React, Tailwind, and code Playground

by azizul

HTML

<div class="container mt-5">
  
  <div class="shape">
    <h2>Hello world</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis, iure repudiandae sit pariatur corporis cupiditate voluptatum ratione. Itaque, veritatis commodi.</p>

    <span class="shape--right"></span>
  </div>
  
  
</div>

CSS

.shape{
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  padding: 2rem;
  text-align: center;
}

.shape:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-clip-path: polygon(58% 6%, 94% 6%, 94% 25%, 100% 32%, 100% 100%, 0 100%, 0 0, 49% 0);
            clip-path: polygon(58% 6%, 94% 6%, 94% 25%, 100% 32%, 100% 100%, 0 100%, 0 0, 49% 0);
    background-color: red;
    z-index: -1;
  }

.shape--right{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: green;
    -webkit-clip-path: polygon(58% 6%, 94% 6%, 94% 25%, 100% 32%, 100% 0, 49% 0);
            clip-path: polygon(58% 6%, 94% 6%, 94% 25%, 100% 32%, 100% 0, 49% 0);
    left: 5px;
    top: -5px;
    z-index: 1;
  }

.shape:before{
    content: "";
    display: block;
    position: absolute;
    width: 29%;
    height: 40%;
    background-color: green;
    -webkit-clip-path: polygon(58% 6%, 94% 6%, 94% 25%, 100% 32%, 100% 0, 49% 0);
            clip-path: polygon(58% 6%, 94% 6%, 94% 25%, 100% 32%, 100% 0, 49% 0);
    left: -20px;
    bottom: -11px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    z-index: 1;
  }