<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>
.box {
  width:200px;
  display:inline-block;
  aspect-ratio:1.5;
  --size: 20px;
  --angle: 130deg;
}
.first {
  background:
    conic-gradient(from calc(var(--angle)/-2 -  45deg) at top    var(--size) left  var(--size),#0000 var(--angle),red   0) 0    0/51% 51% no-repeat,
    conic-gradient(from calc(var(--angle)/-2 - 135deg) at bottom var(--size) left  var(--size),#0000 var(--angle),green  0) 0    100%/51% 51% no-repeat,
    conic-gradient(from calc(var(--angle)/-2 + 135deg) at bottom var(--size) right var(--size),#0000 var(--angle),orange 0) 100% 100%/51% 51% no-repeat;
}
.second {
  background:
    conic-gradient(from calc(var(--angle)/-2 -  45deg) at top    var(--size) left  var(--size),#0000 var(--angle),red   0) 0    0/100% 51% no-repeat,
    conic-gradient(from calc(var(--angle)/-2 - 135deg) at bottom var(--size) left  var(--size),#0000 var(--angle),green  0) 0    100%/51% 51% no-repeat,
    conic-gradient(from calc(var(--angle)/-2 + 135deg) at bottom var(--size) right var(--size),#0000 var(--angle),orange 0) 100% 100%/51% 51% no-repeat;
}
.third {
  background:linear-gradient(45deg,red,blue);
  
  --g:#0000 var(--angle),#000 0;
  -webkit-mask:
    conic-gradient(from calc(var(--angle)/-2 -  45deg) at top    var(--size) left  var(--size),var(--g)) 0    0/100% 51% no-repeat,
    conic-gradient(from calc(var(--angle)/-2 - 135deg) at bottom var(--size) left  var(--size),var(--g)) 0    100%/51% 51% no-repeat,
    conic-gradient(from calc(var(--angle)/-2 + 135deg) at bottom var(--size) right var(--size),var(--g)) 100% 100%/51% 51% no-repeat;
}

body {
  background: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.