JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="content">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid
      veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta
      nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, 
   </div>

CSS

.content {
   background-color: #fff;
   min-height: 320px;
   min-width: 320px;
   max-width: 600px;
   text-align: justify;
}

.content::before {
   float: left;
   display: block;
   content: '';
   height: 0;
   border: 150px solid #dcdcdc;
   float: left;
   
       -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    -webkit-shape-outside: polygon(100% 0%, 100% 0%, 0% 100%);
   

    
    shape-outside: polygon(100% 0, 0 0, 0 100%);


}

JavaScript

-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    -webkit-shape-outside: polygon(100% 0%, 100% 0%, 0% 100%);
    shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);