DEV Community

Cover image for Background Toggle with clip path only HTML and CSS
Nikhil Chandra Roy
Nikhil Chandra Roy

Posted on

2 2

Background Toggle with clip path only HTML and CSS

Background Toggle with clip path only html css

In this tutorial, I have used only HTML and CSS.
for background transition effect I have used clip-path generator

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <input type="checkbox" name="" id="check">
    <label for="check">
        <i class="fas fa-sun"></i>
        <i class="fas fa-moon"></i>
    </label>
    <main></main>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

for icon I have used font-awesome icons.
when toggling it will show sun and moon with black background.
CSS

*{
    box-sizing: border-box;
    margin: 0;
}
label{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 35px;
    background: #7d68ee;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    cursor: pointer;
}
label .fas{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    transition: .5s;
    color: white;
}
label .fa-moon{
    opacity: 0;
}
input:checked ~ label .fas{
    left: 70%;
}
input:checked ~ label .fa-sun{
    opacity: 0;
}
input:checked ~ label .fa-moon{
    opacity: 1;
}
input{
    display: none;
}
main{
    background: #000;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100vh;
    transition: 1s;
    clip-path: polygon(80% 0, 100% 0, 100% 12%, 100% 20%, 98% 3%, 82% 0, 65% 0);

}
input:checked ~ main{
    clip-path: polygon(0 0, 100% 0, 100% 12%, 100% 100%, 0 100%, 0 89%, 0 38%);
}
Enter fullscreen mode Exit fullscreen mode

If you like my tutorial, don't forget to share your thought.
Thanks.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay