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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.