JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d1"></div>
<br>
<div class="d2"></div>

CSS

.d1{
  width:100px;
  height:50px;
  border-radius:0 10px 10px 0;
background: linear-gradient(130deg, red 0%, red 40%, yellow 40%);
}
.d2{
  width:100px;
  height:50px;
background: red;
position:relative;
}
.d2:after{
  position:absolute;
  content:"";
  right:0;
  width:25px;
  height:25px;
  background: linear-gradient( to top left, white 0%, white 50%, red 50%);
}
.d2:before{
  position:absolute;
  content:"";
  width:25px;
  height:25px;
  right:0;
  bottom:0;
  background: linear-gradient( to bottom left, white 0%, white 50%, red 50%);
}