DEV Community

loading...
Cover image for Background Toggle with clip path only HTML and CSS

Background Toggle with clip path only HTML and CSS

nikhilroy2 profile image Nikhil Chandra Roy ・2 min read

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.

Discussion (0)

pic
Editor guide