UI Content Card with Folded Corners Effect using HTML CSS

Namaste!

In this tutorial, I made a “UI Content Card with Folded Corners Effect using HTML CSS”.

Table of Contents

Folded Corners Content Card Effect YouTube Tutorial

Folded Corners Content Card Effect

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!