Hello everybody! I’m excited to share a cool folded corner effect I created using just HTML and CSS. This eye-catching design adds a dynamic flair, creating a realistic illusion that enhances your webpage’s visual appeal —no images, extra scripts, or complex code required. How awesome is that? 😎
Elements with clip-path do not take shadows directly. Instead, they must be nested within a container to inherit its shadows.
Creating the folded corner effect using pseudo-element
We’ll start by using the :before pseudo-element combined with the clip-path property to create the folded corner effect. The main element, which contains the pseudo-element, is styled with a filter property to apply a shadow. This shadow is then inherited by the pseudo-element, allowing the folded corner to display a subtle, realistic shadow as well. This technique keeps the design lightweight and visually appealing.
Basic HTML structure for the folded corner effect
The HTML code snippet creates a card layout. We have a parent element with the class .card, housing two child elements: the first with the class .title for the card’s title, and the second with the class .folded-corner to apply the folded corner effect via CSS.
<div class="card">
<div class="title">Folded Corner Effect</div>
<div class="folded-corner"></div>
</div>CSS structure: creating the paper and cut corner
Starting with the CSS, we define a horizontal rectangle by setting the width to 450px and the height to 300px, along with a subtle 2px border-radius for slightly rounded corners. The background color is set to #228a90, a rich teal with greenish-blue tones that gives the card a fresh, modern look.
.card {
width: 450px;
height: 300px;
border-radius: 2px;
background-color: #228a90;
display: flex;
align-items: center;
justify-content: center;
}
Then we use the clip-path property to shape the desired paper corner for the folded effect. I chose the top-left corner, but you can select any one you prefer by adjusting the corresponding points in the clip-path: polygon() function.
.card {
width: 450px;
height: 300px;
border-radius: 2px;
background-color: #228a90;
clip-path: polygon(0% 30%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);
position: relative;
}Think of the corners in this order: top-left, top-right, bottom-right, bottom-left (clockwise).
Remember to split each selected corner into two coordinates to get the right look (watch those 👇 magenta measurements! 😉)
Take into account that the top-left corner has both Axis-X and Axis-Y on 0%.
Finally, adding position:relative does not change something in our effect but prepares us for future positioning adjustments. As for centering our elements using flexbox—it’s purely for aesthetic purposes, helping keep everything visually balanced and neat.
Below, we can see what is rendered on the screen for now. Pretty cool, right!? 😃
You may also like 🎬
CSS structure: how to create the folded corner effect
To continue building our effect, we’ll use the folder-corner child element to create a second rectangle within the parent card element. This element will act as the folded piece of paper. We’ll give it a width of 70px and a height of 160px.
.card .folded-corner {
width: 70px;
height: 160px;
background-color: red;
position: absolute;
}For now, we’ll use a red background color to help us visualize its position and behavior more clearly—this will be updated to its final color later. We’ll also apply position: absolute to enable precise positioning.
Next, we continue with positioning. We use the top and left properties to move the .folded-corner element closer to the clipped corner, then apply the transform property to rotate it into place.
.card .folded-corner {
...
top: -7px;
left: 52px;
transform: rotate(56deg);
}
Finally, adding the filter property is essential for completing our effect. As mentioned earlier, applying a shadow directly to an element with a clip-path isn’t possible — so the solution is to create an additional element that can hold the shadow.
To do this, we’ll add a :before pseudo-element with the same dimensions as our folded corner. This allows us to recreate the folded shape and apply the shadow to it — adding depth and realism to the folded corner effect. 😎
.card .folded-corner {
...
top: -7px;
left: 52px;
transform: rotate(56deg);
filter: drop-shadow(6px 4px 5px rgba(0, 0, 0, 0.4));
}
Next, we move forward by using the before pseudo-element with the content property and set its position to absolute for precise placement within the parent.
We want this pseudo-element to have the exact dimensions as the parent, so we set both its width and height to 100%, something that allows it to inherit the parent’s size.
.card .folded-corner:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: pink;
border-radius: 0 0 10% 0;
}For now, we apply a pink background to help visualize the structure. Finally, we add a border-radius of 10% to the bottom corner, which softens the edge and creates a smoother, more realistic folded appearance.
Next, we replace the pink background with a smooth linear gradient. We choose colors similar to the main hue but make them darker towards the edges and lighter in the center. This gradient effect enhances the appearance by making the center appear brighter and polish. ✨
.card .folded-corner:before {
...
background: linear-gradient(to right, #277c7f 5%, #5abcbc 30%, #63c5c6 40%, #5abcbc 50%, #277c7f 90%, #0d4749);
}
To complete the shape, we apply the clip-path: polygon(0% -2%, 0% 100%, 100% 100%) property. This is essential for transforming the before pseudo-element —which starts as a rectangle, just like its parent—into a triangle.
In simple words, this clipping path reshapes the element into the desired triangular form. 🥳
.card .folded-corner:before {
...
clip-path: polygon(0% -2%, 0% 100%, 100% 100%);
}
The last step is to turn back to the parent element with the class .folded-corner and “remove” the red rectangle from view by simply replacing the red background-color with a transparent value.
As we can see, the :before pseudoelement inherits its parent shadow effect while the parent becomes invisible.
.card .folded-corner {
width: 70px;
height: 160px;
background-color: transparent;
position: absolute;
top: -7px;
left: 52px;
transform: rotate(56deg);
filter: drop-shadow(6px 4px 5px rgba(0, 0, 0, 0.4));
}
We can enhance the title to have a more eye-cathing result. Applying a white background-color, increasing the font-size, and adding a subtle black text-shadow will make the title stand out beautifully, elevating the overall design. 📄 ✨
.card .title {
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-align: center;
padding: 0 50px;
color: white;
text-shadow: 1px 1px 1px black;
}
You may also like 🎬
Complete code example
<div class="card">
<div class="title">Folded Corner Effect</div>
<div class="folded-corner"></div>
</div>.card {
width: 450px;
height: 300px;
border-radius: 2px;
background-color: #228a90;
clip-path: polygon(0% 30%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.card .folded-corner {
width: 70px;
height: 160px;
background-color: transparent;
position: absolute;
top: -7px;
left: 52px;
transform: rotate(56deg);
filter: drop-shadow(6px 4px 5px rgba(0, 0, 0, 0.4));
}
.card .folded-corner:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 0 0 10% 0;
background: linear-gradient(to right, #277c7f 5%, #5abcbc 30%, #63c5c6 40%, #5abcbc 50%, #277c7f 90%, #0d4749);
clip-path: polygon(0% -2%, 0% 100%, 100% 100%);
}
.card .title {
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-align: center;
padding: 0 50px;
color: white;
text-shadow: 1px 1px 1px black;
}You may also like 🎬
If you have any questions or run into any issues, don’t hesitate to reach out in the comments below — I’m happy to help. You can easily copy any code snippet by clicking the copy icon in the top-right corner of each block.
Summary
We started by creating the paper and cutting its corner. Then, we set the clip-path property to define the shape and positioned the folded-corner element precisely over the clipped area. After that, we enhanced the styling with background gradients that match the paper’s tone, and wrapped up by polishing the effect for a clean, realistic look. 📄 ✨
Wishing you the best of luck in all your creative endeavors! 😃
🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼
