JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="menu" onclick="menu();">
<span id="menu" class="burger"></span>
</div>

CSS

.menu {margin:auto;width:30px;height:30px;background-color:yellow;padding:10px;}

.burger {background-color:#000000;width:100%;height:100%;display:block;
clip-path: polygon(0% 0%,100% 0%,100% 20%,0% 20%,0% 40%,100% 40%,100% 60%,0% 60%,0% 80%,100% 80%,100% 100%,0% 100%);
}

.burger_x {background-color:#000000;width:100%;height:100%;display:block;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); 
}

JavaScript

function menu() {
var menu = document.getElementById('menu');
if (menu.className == "burger") {menu.className = "burger_x";} else {menu.className = "burger";}



}