JSFiddle - React, Tailwind, and code Playground

by Andra Jimenez

HTML

<section class="folded">
<p>Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</section>

CSS

section.folded{
position:relative; /*lets us position the fold relative to the box*/
width:300px; /*width of the box*/
padding:20px 40px;
background:#676767; /*colour of the box*/
}
.folded p{
color:#f7f7f7;
}

/*We're going to create a 65px fold slightly darker than the box*/
.folded:after {
border-right: #ffffff 65px solid; /*we don't want this border to be seen so we use the same colour as the page, the width of the border is the size you want the fold to be*/
border-bottom:#ABABAC 65px solid; /*this border forms the most obvious part of the fold, use a colour slightly darker than the box (or whatever colour you imagine the reverse of the 'paper' to be), the size should be the same as border-right*/
content:""; /*creates a blank psuedo element which is used as the fold*/
/*add a small drop shadow to the fold*/
-webkit-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
-moz-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
}

.folded:after {
position:absolute; /*positions the fold relative to the box created above rather than the whole page*/
top:0; /*places the top of the fold 0px from the top of the box*/
right:0; /*places the right side of the fold 0px from the right side of the box*/
}

JavaScript

//This is an example of a folded border