Namaste!
In this tutorial, I made a “UI Content Card with Folded Corners Effect using HTML CSS”.
Folded Corners Content Card Effect YouTube Tutorial
Folded Corners Content Card Effect Source Code
You can download the source code below.
.html file code
Put this inside .html file or <body> Your Code Here </body> tags
<div class="box">
<article class="content">
<h4> Pankaj Lamba </h4>
<h5> This is for sub-heading</h5>
<p> one of the major issueses in these times is that there are lots of viruses in the market as deisease that affects us physically and mentally.</p>
</article>
</div>.css file code
Put this inside .css file or <style> Your Code Here </style> tags
body {
background: #8457f6;
}
.box {
display: flex;
height: 100vh;
align-items: center;
filter: drop-shadow(0 0 6px #6f47d3);
}
h4 {
font-size: 20px;
}
.content {
position: relative;
margin: auto;
background: #fff;
border-radius: 40px;
color: #363c5f;
padding: 40px;
width: 260px;
text-align: left;
display: flex;
font-family: sans-serif;
flex-direction: column;
justify-content: space-between;
clip-path: polygon(0 0, calc(100% - 70px) 0, 100% 70px, 100% 100%, 0 100%);
}
.content p {
text-transform: capitalize;
font-size: 12px;
}
.content::after {
content: '';
position: absolute;
display: block;
width: 70px;
height: 70px;
background: #e1e1f2;
top: 0;
right: 0;
border-bottom-left-radius: 50px;
}Have fun!
Thank You!
