<div class="box"></div>
<div class="box second"></div>

.box {
  width:300px;
  display:inline-block;
  aspect-ratio:1.5;
  --size: 30px;
  --angle: 130deg;
  background:
    conic-gradient(from calc(var(--angle)/-2 -  45deg) at top    var(--size) left  var(--size),#0000 var(--angle),red   0) 0    0,
    conic-gradient(from calc(var(--angle)/-2 +  45deg) at top    var(--size) right var(--size),#0000 var(--angle),blue  0) 100% 0,
    conic-gradient(from calc(var(--angle)/-2 - 135deg) at bottom var(--size) left  var(--size),#0000 var(--angle),green  0) 0    100%,
    conic-gradient(from calc(var(--angle)/-2 + 135deg) at bottom var(--size) right var(--size),#0000 var(--angle),orange 0) 100% 100%;
  background-size:51% 51%;
  background-repeat:no-repeat;
}
.second {
  background:linear-gradient(45deg,red,blue);
  --size: 30px;
  --angle: 130deg;
  
  --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,
    conic-gradient(from calc(var(--angle)/-2 +  45deg) at top    var(--size) right var(--size),var(--g)) 100% 0,
    conic-gradient(from calc(var(--angle)/-2 - 135deg) at bottom var(--size) left  var(--size),var(--g)) 0    100%,
    conic-gradient(from calc(var(--angle)/-2 + 135deg) at bottom var(--size) right var(--size),var(--g)) 100% 100%;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
}

body {
  background: pink;
}