.box {
  width:200px;
  display:inline-block;
  aspect-ratio:1.5;
  position: relative;
  z-index: 0;  
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.first:before {
  background:
    radial-gradient(40px at 40px 40px,#0000 calc(98% - 10px),red calc(100% - 10px) 98%,#0000) -40px -40px,
    linear-gradient(90deg,blue 10px,#0000 0 calc(100% - 10px),blue 0) 50%/100% calc(100% - 80px + 10px) no-repeat,
    linear-gradient(      #000 10px,#0000 0 calc(100% - 10px),#000 0) 50%/calc(100% - 80px + 10px) 100% no-repeat;
}
.second:before {
  --g: #0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000;
  --mask: 
    radial-gradient(40px at 40px 40px,var(--g)) -40px -40px,
    linear-gradient(90deg,#000 10px,#0000 0 calc(100% - 10px),#000 0) 50%/100% calc(100% - 80px + 10px) no-repeat,
    linear-gradient(      #000 10px,#0000 0 calc(100% - 10px),#000 0) 50%/calc(100% - 80px + 10px) 100% no-repeat;
  background:linear-gradient(45deg,blue,red);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}