html{
  height:100%;
}
body{
  height:100%;
  display:flex;
  margin:0;
}
.content {
  width: 300px;
  height: 150px;
  margin: auto;
  -webkit-mask: radial-gradient( circle at 50%, red 5px, transparent 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  background: linear-gradient(
45deg
, orange, red);
}