JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

<div class="foldright">
 <h2>Headline</h2>
  <p>Lorem ipsum dolor sit amet...</p> of the left with your absolute positioning and flip your triang.</p>
</div>
</div>

CSS

.foldright {
  position: relative; 
}
 
.foldright:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-left: 69px solid transparent;
}