<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');
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.