.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 0    40px,#0000 calc(98% - 10px),red calc(100% - 10px) 98%,#0000) 0 -40px,
    conic-gradient(from -90deg at right 10px bottom 10px, #0000 0 90deg,blue 0) 100% 100%/calc(100% - 40px + 10px) calc(100% - 10px) repeat-y,
    linear-gradient(green 0 0) left/10px calc(100% - 80px + 10px) no-repeat;
}
.second:before {
  --g: #0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000;
  --mask:
    radial-gradient(40px at 0    40px,var(--g)) 0 -40px,
    conic-gradient(from -90deg at right 10px bottom 10px, #0000 0 90deg,#000 0) 100% 100%/calc(100% - 40px + 10px) calc(100% - 10px) repeat-y,
    radial-gradient(farthest-side at 0    100%,var(--g)) 0    100%/40px 40px no-repeat,
    linear-gradient(#000 0 0) left/10px calc(100% - 80px + 10px) no-repeat;
  background:linear-gradient(45deg,blue,red);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}