CSS：Safari上的堆叠订单问题

我正在尝试使用CSS创建一个形状，使用before和after伪元素。在Chrome和Firefox中，该形状呈现出我所期望的效果，但在Safari中：before内容最终堆叠在：after内容之上，我不知道为什么。它看起来和my:before元素中的转换有关，但我不确定我到底做错了什么，以及为什么它在Safari中不同，我不知道如何修复它

.outer{
位置：绝对位置；
顶部：50px；
左：100px；
变换：旋转（27度）；
}
.形状{
位置：绝对位置；
高度：100px；
宽度：100px；
背景颜色：蓝色；
边界半径：50%；
}
.形状：以前{
内容：''；
位置：绝对位置；
左：36px；
顶部：26px；
宽度：200px；
高度：48px；
背景色：继承；
边界右上角半径：50%；
边框右下半径：50%；
变换：透视（200px）旋转（70度）；
}
.形状：之后{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：92px；
高度：92px；
边界半径：50%；
背景：
径向梯度（蓝色17%，透明19%），
径向梯度（红色26%，透明28%），
径向梯度（蓝色40%，透明42%），
红色
}

< /代码> 确切地指出问题是什么（而我不能测试），但是你可以调整<代码>：在形状之前考虑一个径向梯度，以便创建一个透明的部分，即使元素在顶部也可以避免重叠。

下面是一个例子，我明确地在顶部制作了
：before
，它可以工作。我还减少了一点代码


.shape{
位置：绝对位置；
顶部：50px；
左：100px；
高度：100px；
宽度：100px；
变换：旋转（27度）；
}
.形状：以前{
内容：''；
位置：绝对位置；
左：36px；
顶部：26px；
宽度：200px；
高度：48px；
背景：径向梯度（左侧25px23px，透明98%，蓝色100%）；
边界右上角半径：50%；
边框右下半径：50%；
变换：透视（200px）旋转（70度）；
z指数：1；
}
.形状：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边界半径：50%；
边框：4px纯蓝色；
背景：
径向梯度（蓝色17%，透明19%），
径向梯度（红色26%，透明28%），
径向梯度（蓝色40%，透明42%），
红色
}
<>代码> <代码> > p>不能确切地确定问题是什么（而我不能测试），但是你可以调整<代码>：在形状之前考虑一个径向梯度，以便创建一个透明的部分，即使元素在顶部，也避免重叠。

下面是一个例子，我明确地在顶部制作了
：before
，它可以工作。我还减少了一点代码


.shape{
位置：绝对位置；
顶部：50px；
左：100px；
高度：100px；
宽度：100px；
变换：旋转（27度）；
}
.形状：以前{
内容：''；
位置：绝对位置；
左：36px；
顶部：26px；
宽度：200px；
高度：48px；
背景：径向梯度（左侧25px23px，透明98%，蓝色100%）；
边界右上角半径：50%；
边框右下半径：50%；
变换：透视（200px）旋转（70度）；
z指数：1；
}
.形状：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边界半径：50%；
边框：4px纯蓝色；
背景：
径向梯度（蓝色17%，透明19%），
径向梯度（红色26%，透明28%），
径向梯度（蓝色40%，透明42%），
红色
}