SOURCE

<div class="e1"></div>
<div class="e2">background-image是相互叠加的，最先写的在最上面，所以需要用到background-size，这样background-image就只显示一半了，但是是平铺的，所以还需要去掉平铺</div>
<div class="e3"></div>
<div class="e4"></div>

div {
  background:yellow;
  width:400px;
  height:100px;
  margin-bottom: 10px;
}
.e1 {
  background:linear-gradient(45deg, transparent 15px, yellow 0);
}
.e2 {
  background:
    linear-gradient(-45deg, transparent 15px, blue 0) right,
    linear-gradient(45deg, transparent 15px, yellow 0) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
}
.e3 {
  background:
    linear-gradient(-45deg, transparent 15px, blue 0) right bottom,
    linear-gradient(45deg, transparent 15px, yellow 0) left bottom,
    linear-gradient(-135deg, transparent 15px, green 0) right top,
    linear-gradient(135deg, transparent 15px, pink 0) left top;
  background-size:50% 50%;
  background-repeat:no-repeat;
}
.e4 {
  background:
    radial-gradient(circle at top left, transparent 15px, yellow 0) top left,
    radial-gradient(circle at top right, transparent 15px, yellow 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, yellow 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, yellow 0) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
}