Background Toggle with clip path only HTML and CSS

#html #css #background #animation

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>

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%);
}

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