纯CSS-使用遮罩图像和径向梯度制作菱形形状

我试图在纯CSS中制作一些钻石形状，尝试使用遮罩图像和径向渐变，但我没有完全成功

我喜欢做的两种形式是：

我试着改变一块黑色的东西

width: 20px;
height: 20px;
background: #000;
-webkit-mask-image: radial-gradient(circle 7px at top, transparent 7px, black 50%);

---

我不知道如何解决我的问题，甚至只通过纯CSS是可行的：）

这里你真的不需要掩码。多个

radial-gradient（）

可以做到这一点

.box{
宽度：50px；
高度：50px；
利润率：10px；
--c:透明90%，#000 92%98%，透明；/*调整此值*/
背景：
径向梯度（左上角最远一侧，var（--c））左上角，
径向梯度（最远侧在右上角，var（--c））右上角，
径向梯度（左下角最远一侧，var（--c））左下角，
径向梯度（最远侧位于右下角，var（--c））位于右下角；
背景大小：51%51%；/*添加此项（每层占高度和宽度的一半）*/
背景重复：无重复；
} 
阿尔特先生{
--c:transparent 90%，#000 92%；/*我们只需删除最后一个透明部分即可获得完整形状*/
}
身体{
背景：粉红色；
}