html{
  height:100%;
}
body{
  height:100%;
  display:flex;
  margin:0;
  justify-content: center;
  align-items: center;
}
.content {
  width: 300px;
  height: 150px;
  margin: auto;
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath data-name='椭圆 1' d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  background: linear-gradient(
45deg
, orange, red);
}