<div class="container">
<div class="box center"></div>
<!-- <div class="box pause"></div> -->
</div>
body{
background: #222;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box{
width: 74px;
height: 74px;
box-sizing: border-box;
border-style: solid;
border-width: 37px 0px 37px 74px;
border-color: transparent transparent transparent steelblue;
transition: all 100ms ease-in-out;
}
.pause{
border-style: double;
border-width:0px 0px 0px 60px;
}
const box = document.querySelector('.box');
box.addEventListener('click', (e)=>{
e.target.classList.toggle('pause');
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.