<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;
  border:1px solid;
}

.first {
  background:
    conic-gradient(from -90deg at right 10px bottom 10px, pink 0 90deg,blue 0) 100% 100%/calc(100% - 40px + 10px) calc(100% - 10px) no-repeat;
}
.second {
  background:
    conic-gradient(from -90deg at right 10px bottom 10px, pink 0 90deg,blue 0) 100% 100%/calc(100% - 40px + 10px) calc(100% - 10px) repeat-y;
}
.third {
  background:
    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;
}