UI Content Card with Folded Corners Effect using HTML CSS

In this tutorial, I made a 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”.

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!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

Website Design Trends in 2022 5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games
Secured By miniOrange