Hoai-Nho-Logo

/

Blog

AboutProjectsBlogContact

All topics

All topics
Explore the newest trends in technology. Learn about AI, software, gadgets, and cybersecurity. Stay up to date in the fast-paced world of tech.
AI
image-render-seo

The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]

Architecture & Design

Architecture & Design
Discover cutting-edge architecture and design ideas. Explore innovative projects, modern interior design trends, sustainable architecture, and creative design solutions to inspire your next project.aws saa-c03
AWS

Explore best practices, tutorials, case studies, and insights on leveraging AWS’s vast ecosystem to build, deploy, and manage applications in the cloud

Design patterns

The Design Pattern category explores reusable solutions to common software design challenges, helping developers write efficient, maintainable, and scalable code

Docker
Explore essential Docker tutorials and resources. Find helpful tips, best practices, and tools to master containerization and improve your deployment workflow.
Security

The Security category focuses on best practices, tools, and frameworks essential for protecting applications, data, and infrastructure in an increasingly digital world

SSL license expired?

Ultimate Guide to Renewing SSL Certificates: Secure Your Website in 2024

Ensure your website stays secure! 🔒 Learn how to check, renew, and manage your SSL certificate to prevent security risks and downtime. Follow our step-by-step guide with best practices to keep your HTTPS protection active in 2024!

CSS

Database

Database
Find easy-to-follow guides on database SQL, NoSQL, PostgreSQL, and MySQL. Learn how to make databases that are fast and work well. Get tips to improve your skills. database
MySQL
Discover essential database guides covering SQL, NoSQL, and best practices. Get tips and performance benchmarks to improve your data management skills.
NoSQL
Discover essential database guides covering SQL, NoSQL, and best practices. Get tips and performance benchmarks to improve your data management skills.
PostgreSQL
Explore comprehensive PostgreSQL tutorials and resources. Find helpful tips, best practices, and performance benchmarks to enhance your database skills.
Search topic

LIKE vs Full-Text Search: SQL Performance and Use Cases

Explore the differences between SQL’s LIKE operator and Full-Text Search. Learn their syntax, performance, use cases, and advanced features for optimizing database queries

Generation

Interview Question

NodeJS

NodeJS
Explore beginner to advanced tutorials on JavaScript and TypeScript. Find helpful tips, best practices, and tools to create powerful web applications. typescript_vs_javascript
Javascript/Typescript
Learn JavaScript and TypeScript with easy guides. Discover tips, best practices, and tools to build efficient web applications quickly.
image-render-seo

The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]


© 2025 Hoai-Nho. All rights reserved.

ContactGitHub
  1. Home
  2. /Blog
  3. /Creating Stylish Folded Tags in ReactJS Using Clip-Path

Creating Stylish Folded Tags in ReactJS Using Clip-Path

The FoldedTag component is a versatile UI element designed to add a modern, folded-corner aesthetic to your React applications. By leveraging the power of CSS clip-path, this component creates intricate shapes like folded corners and pentagons, ensuring a unique and eye-catching design.

Clip-path for tags
Hoài Nhớ@hoainho
January 08, 2025
|

2 min read

|

494 Views

Share:

Custom tags and badges are a great way to add visual flair to your React applications. In this article, we’ll walk through creating a FoldedTag component with unique folded corners using clip-path. We’ll dive into the implementation, styling, and how to use this component effectively.

Red tag
purple tag

Try to play on Playground

1. Introduction to the FoldedTag Component

The FoldedTag component is a visually appealing badge with folded corners that you can easily customize. It includes:

  • Customizable Colors: Adjust the light and dark background colors.
  • Optional Folded Corners: Choose whether to display the left or right folded corners.
  • Responsive Design: Scalable for different screen sizes.

2. Code for the FoldedTag Component

Component Code (FoldedTag.js)

Here’s the implementation of the FoldedTag component in React:

import React from "react";  
import styles from "../styles.module.scss";  
import PropTypes from "prop-types";  

const FoldedTag = ({ text, color, hiddenFoldLeft = false, hiddenFoldRight = false }) => {  
    const lightBg = color?.light || "#1c1c22";  
    const darkBg = color?.dark || "#000000";  

    return (  
        <div className="relative inline-flex items-center justify-center">  
            {/* Left Folded Corner */}  
            {!hiddenFoldRight && (  
                <>  
                    <div  
                        style={{ backgroundColor: lightBg }}  
                        className={`absolute top-0 left-0 -translate-x-[9.5px] w-[10px] h-[6px] ${styles.clipFoldedLeft}`}  
                    ></div>  
                    <div  
                        style={{ backgroundColor: darkBg }}  
                        className={`absolute top-0 left-0 -translate-x-[9.5px] w-[10px] h-[6px] ${styles.clipPentagonLeft}`}  
                    ></div>  
                </>  
            )}  
            {/* Right Folded Corner */}  
            {!hiddenFoldLeft && (  
                <>  
                    <div  
                        style={{ backgroundColor: lightBg }}  
                        className={`absolute top-0 right-0 translate-x-[9.5px] w-[10px] h-[6px] ${styles.clipFoldedRight}`}  
                    ></div>  
                    <div  
                        style={{ backgroundColor: darkBg }}  
                        className={`absolute top-0 right-0 translate-x-[9.5px] w-[10px] h-[6px] ${styles.clipPentagonRight}`}  
                    ></div>  
                </>  
            )}  
            <span  
                style={{ backgroundColor: lightBg }}  
                className="text-white uppercase font-bold text-[10px] sm:text-sm rounded-b-[10px] py-1 px-2.5 sm:px-5 whitespace-nowrap"  
            >  
                {text}  
            </span>  
        </div>  
    );  
};  

FoldedTag.propTypes = {  
    color: PropTypes.object,  
    text: PropTypes.string,  
    hiddenFoldLeft: PropTypes.bool,  
    hiddenFoldRight: PropTypes.bool  
};  

export default FoldedTag;  

3. Styling with SCSS

The folded corners are achieved using clip-path, a powerful CSS property that creates custom shapes. Below is the SCSS file defining the styles for this component:

Styles (styles.module.scss)

.clipPathTriangle {  
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);  
}  

/* Folded left corner */  
.clipFoldedLeft {  
  clip-path: polygon(10% 0%, 10% 0%, 32.592% 2.8%, 51.078% 10.4%, 65.867% 21.6%, 77.363% 35.2%,   
  85.975% 50%, 92.109% 64.8%, 96.171% 78.4%, 98.57% 89.6%, 99.71% 97.2%, 100% 100%, 100% 0%, 10% 0%);  
}  

.clipPentagonLeft {  
  clip-path: polygon(100% 100%, 100% 100%, 99.855% 97.2%, 99.286% 89.6%, 98.091% 78.4%, 96.067% 64.8%,   
  93.013% 50%, 88.725% 35.2%, 83.002% 21.6%, 75.642% 10.4%, 66.442% 2.8%, 55.2% 0%, 55.2% 0%,   
  43.667% 2.8%, 33.677% 10.4%, 25.152% 21.6%, 18.014% 35.2%, 12.188% 50%, 7.594% 64.8%, 4.155% 78.4%,   
  1.795% 89.6%, 0.436% 97.2%, 0% 100%, 100% 100%);  
}  

/* Folded right corner */  
.clipFoldedRight {  
  clip-path: polygon(90% 0%, 90% 0%, 67.408% 2.8%, 48.922% 10.4%, 34.133% 21.6%, 22.637% 35.2%, 14.025% 50%,  
  7.891% 64.8%, 3.829% 78.4%, 1.43% 89.6%, 0.29% 97.2%, 0% 100%, 0% 0%, 90% 0%);  
}  

.clipPentagonRight {  
  clip-path: polygon(0% 100%, 0% 100%, 0.145% 97.2%, 0.714% 89.6%, 1.909% 78.4%, 3.933% 64.8%, 6.988% 50%,   
  11.275% 35.2%, 16.998% 21.6%, 24.358% 10.4%, 33.558% 2.8%, 44.8% 0%, 44.8% 0%, 56.333% 2.8%, 66.323%   
  10.4%, 74.848% 21.6%, 81.986% 35.2%, 87.813% 50%, 92.406% 64.8%, 95.845% 78.4%, 98.205% 89.6%, 99.564%   
  97.2%, 100% 100%, 0% 100%);  
}  

4. How It Works

  • Clip-Path Shapes: The clip-path property is used to create complex shapes like the folded corners and pentagons.
  • Positioning: Absolute positioning is used to place the folded corners in the right locations.
  • Customizable Props:
  • text: Displays the tag’s text.
  • color: Sets the light and dark colors for the tag.
  • hiddenFoldLeft and hiddenFoldRight: Enable or disable the folded corners.


5. Usage Example

import React from "react";  
import FoldedTag from "./components/FoldedTag";  

const App = () => {  
    return (  
        <div className="flex flex-col items-center space-y-4">  
            <FoldedTag   
                text="New"   
                color={{ light: "#FF5733", dark: "#C70039" }}   
            />  
            <FoldedTag   
                text="Sale"   
                color={{ light: "#33FF57", dark: "#239B56" }}   
                hiddenFoldLeft   
            />  
            <FoldedTag   
                text="Hot"   
                color={{ light: "#3357FF", dark: "#1B4F72" }}   
                hiddenFoldRight   
            />  
        </div>  
    );  
};  

export default App;  

6. Conclusion

The FoldedTag component is a stylish way to add custom tags or labels to your React applications. With clip-path, you can create intricate shapes that enhance your UI while keeping the implementation clean and reusable.

Would you like to explore more advanced customization or animations for this component? Let me know through my email: [email protected]

Feel free to customize the colors, shapes, and sizes to suit your needs. Happy coding! 🚀


Tags:
Advanced TagsClip-PathFolded Tag
Written by

author
Hoài Nhớ

Hoài Nhớ

@Hoài Nhớ
Advanced TagsClip-PathFolded Tag

Table of Contents

    References posts

    The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

    Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]

    Hoài Nhớ
    Essential Responsive Design Tips for React Developers

    Creating truly responsive web applications that work perfectly from small 320px mobile screens to 4K displays requires a strategic approach. This guide provides practical

    Hoài Nhớ
    React Coin Celebration Animation Component | Interactive Particle Effects

    A high-performance React component that creates an engaging coin celebration animation using Framer Motion. Features dynamic particle systems, smooth transitions, and interactive effects perfect for gaming applications, reward celebrations, and interactive web experiences. Built with React 18+ and Framer Motion.

    Hoài Nhớ
    Related Posts

    image-render-seo
    SEO
    The Ultimate Guide to Image Rendering in ReactJS: Performance, SEO, and Best Practices (2025)

    Overview: The Critical Role of Images in Modern Web Development Images are fundamental to web experiences, accounting for approximately 50% of a typical webpage’s total size. How you choose to render these assets significantly impacts user experience, page performance, and search engine rankings. As web technologies evolve, developers have multiple options for implementing images in […]

    Hoài Nhớ
    Cover banner
    Essential Responsive Design Tips for React Developers

    Creating truly responsive web applications that work perfectly from small 320px mobile screens to 4K displays requires a strategic approach. This guide provides practical

    Hoài Nhớ
    coin-celebration-effect
    AnimationCoin Celebration
    React Coin Celebration Animation Component | Interactive Particle Effects

    A high-performance React component that creates an engaging coin celebration animation using Framer Motion. Features dynamic particle systems, smooth transitions, and interactive effects perfect for gaming applications, reward celebrations, and interactive web experiences. Built with React 18+ and Framer Motion.

    Hoài Nhớ
    tripple-cache
    FrontendOptimizationIndexedDB
    🚀 Triple-Layered Web Caching Strategy: How Memory, IndexedDB and HTTP Cache Improved Speed by 96%

    Discover how to accelerate your website through our powerful triple-layered caching strategy combining Memory Cache, IndexedDB, and HTTP Cache. Detailed guidance from theory to practice helps reduce page load time by up to 96%, improve user experience, and optimize performance across all devices.

    Hoài Nhớ
    Redux Thunk and Saga
    Redux SagaRedux Thunk
    Redux Thunk vs Redux Saga: A Deep Dive into Strengths, Weaknesses, and Hidden Pitfalls

    This article explores the core differences between Redux Thunk and Redux Saga, highlighting their strengths, weaknesses, and best use cases. Whether you’re building a small application or managing complex asynchronous workflows, understanding these middleware options will help you make the right choice for your Redux architecture.

    Hoài Nhớ

    Subscribe to our newsletter

    Get the latest posts delivered right to your inbox