JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box"></div>

CSS

.box  {
  position: relative;
  height: 200px;
  border: 1px solid #000;
  margin: 20px;
}
.box::before  {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  clip: ;
  width: 25px;
  height: 50px;
  border: 1px solid #000;
  border-left: 0 none;
  border-radius: 0 25px 25px 0 / 0 25px 25px 0;
  background: #fff;
  transform: translateY(-50%);
}

JavaScript

const body = document.querySelector('body');

setInterval(function(){
	let r = Math.random() * 255;
  let g = Math.random() * 255;
  let b = Math.random() * 255;
 	body.style.background = 'rgba('+ r + ',' + g + ',' + b +',1)'
}, 2000);