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
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!

Total
0
Shares
Leave a Reply
Previous Post
Creative Switch Toggle On-Off with CSS | CSS Checkbox Toggle

Creative Switch Toggle On-Off with CSS : Checkbox Toggle

Next Post
Working CSS Live Search Form | Search Text highlighter

Working CSS Live Search Form | Search Text highlighter

Related Posts
Total
0
Share