Html 形状为一半的z指数

我想做如下形状：

到目前为止，我已经尝试过了，但如何将它们混合在一起：

.clal加载器{
显示器：flex；
}
.clal loader分区{
边框：10px实心#38477e；
左边框：0；
边框右下半径：100px；
边框右上角半径：100px；
宽度：30px；
高度：30px；
}
.clal装入器分区：第n个子（1）{
边框颜色：#0cabec；
}
.clal装入器分区：第n个子（2）{
变换：旋转（-180度）；
位置：绝对位置；
左：25px；
z指数：-1；
}

<> >我考虑径向梯度，只有一个元素如下。基本上，它们是4个相似的渐变，每个渐变创建一个四分之一圆，您可以调整顺序以获得最终形状：


.box{
宽度：100px；
高度：150像素；
背景：
径向渐变（左下方圆圈，透明40%，蓝色40%，蓝色60%，透明61%）顶部，
径向渐变（右下角的圆圈，透明40%，绿色40%，绿色60%，透明61%）顶部，
径向渐变（右上角的圆圈，透明40%，绿色40%，绿色60%，透明61%）底部，
径向渐变（左上角的圆圈，透明40%，蓝色40%，蓝色60%，透明61%）底部；
背景大小：100%50%；
背景重复：无重复；
}

您想要渐变色还是只需要一种颜色？使用纯CSS和两个元素无法做到这一点。您需要使用svg图像，或者将其中一个元素拆分为两个。每个元素只有一个
z-index
可能。@Temaniaf如果我不是指天蓝色，请在底部插入蓝色谢谢。。一直以来都很棒…但我想用2个元素来做，因为我想为这些元素制作一些动画。。。