<div class="quick"></div>

body {
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:lightblue;
  overflow:hidden;
}

.quick {
  width:150px;
  height:197px;
  background:
    conic-gradient(at calc(100% - 3px) 50%,#a49d83 0 90deg,#0000 0) 0 0/40px 40px,
    conic-gradient(at calc(100% - 3px) 50%,#a49d83 0 90deg,#0000 0) 20px 20px/40px 40px,
    linear-gradient(#a49d83 3px,#0000 0) 0 -3px/100% 20px
    #966042;
  position:relative;
}
.quick:before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  clip-path: polygon(-150px -150px,calc(100% + 150px) -150px,calc(100% + 150px) 0,-150px 100%);
  box-shadow: 0 0 0 200vmax lightblue;
  animation:break 2s forwards 1s;
}

.quick:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right,#0000,#ffff 40% 60%,#0000);
    top: calc(50% - 3px);
    animation:slash 1s forwards;
}

@keyframes slash {
  0%,20%{transform: rotate(-24deg) translate(-100vmax)}
  100%  {transform: rotate(-24deg) translate(100vmax)}
}
@keyframes break {
  100% {transform: translate(-50px, 22px)}
}