css - 如何制作具有4个斜 Angular 边缘的形状

我正在尝试制作具有四个负弯曲角的形状，并尝试了径向渐变。但是，仅应用了一个角落，我不知道为什么。
https://jsfiddle.net/xiej/1Lqysaho/1/

#shape2 {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 400px;
  right: 400px;
  background-image:
    radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px),
    radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px),
    radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px),
    radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px);
}

最佳答案

每个径向渐变的最后一个色标覆盖了正方形的其余部分，并认为它们彼此层叠。我不确定我的解决方法是否是获得所需形状的最佳方法，但是我认为这至少可以使形状变好！我缩短了挡块，以在覆盖其他三个角之前终止径向渐变。

https://jsfiddle.net/1Lqysaho/2/

background: #F00;
background-image:
   radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px),
   radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px),
   radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px),
   radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px);