Html 如何在flexbox中分层形状

我目前正在使用以供修改以供我使用。当我最初看到这个设计时，我想我会在一个flexbox容器中创建两个div，右边的div会在右边的div上面加上z索引。类似于

.container{
显示器：flex；
宽度：200px；
弯曲方向：行；
}
.左侧{
弹性：4；
背景色：红色；
}
.右侧{
弹性：1；
背景颜色：橙色；
z指数：3；
边框样式：2件纯白；
边界半径：50%；
}

查看购物车
3.

负边距

您可以使用负边距来解决问题，而无需使用位置绝对/相对解决方案

.container{
显示器：flex；
宽度：200px；
弯曲方向：行；
}
.左侧{
弹性：4；
背景色：红色；
}
.右侧{
弹性：1；
背景颜色：橙色；
z指数：3；
边框样式：2件纯白；
边界半径：50%；
左边距：-60px；
文本对齐：居中；
}

查看购物车
3.

您可以将红色背景应用于容器，并使用

transform:translateX（50%）

将橙色圆圈移动到容器外一半，以实现该效果

.container{
显示器：flex；
宽度：200px；
弯曲方向：行；
背景：红色；
位置：相对位置；
颜色：白色；
}
.货柜：在{
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
内容：''；
}
.货柜：在，
.伯爵{
边框：2倍纯白；
}
.左侧{
柔性生长：1；
}
.中心{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.伯爵{
宽度：50px；
高度：50px；
背景颜色：橙色；
边界半径：50%；
转化：translateX（50%）；
}

查看购物车
3.

这就是你想要做的吗？我的建议是的，非常接近最终目标@GCyrillus，您的解决方案也比我的解决方案有所改进。我更新了pen并删除了绝对定位；）每种解决方案我都花了一些时间。所有张贴的解决方案都很好。我选择这个是因为​我认为这种转变最有意义。