用CSS创建形状

正在尝试使用css创建此形状

我已经设法得到了这个结果

但我不知道如何在矩形的底部创建圆弧 这是我的css

.left-page {             
         color: hsl(35, 35, 35);
         border-top-left-radius:  26px;
         border-bottom-left-radius:  26px;
         border: solid 1px hsl(274,65,35);
         
    }

---

你可以试试这样，但我认为这不是一个好主意：

.shape{
宽度：400px；
高度：400px；
背景：红色；
边框左上半径：20px；
边框左下半径：20px；
位置：相对位置；
}
.形状：：之后{
内容：''；
背景：红色；
宽度：钙（100%-15px）；
高度：40px；
位置：绝对位置；
底部：-17px；
右：0；
边界半径：50%；
}

---

您可以使用底部的“footer”（或伪元素之后的

）来说明您想要的效果


.content{
宽度：200px；
高度：300px；
边框：1px纯紫色；
边框底部：无；
边框左上半径：32px；
}
.底部{
宽度：200px；
高度：50px；
底边：1px纯紫色；
左边框：1px纯紫色；
右边框：1px纯紫色；
边界左下半径：50%；
边框右下半径：50%；
}
仅使用图像并将其设置为背景会更容易吗？如果不是这样，您可以做的一件事是在选择器（或实际元素）之前或之后添加一个：：position absolute，并将其四舍五入，但这将是一个真正令人头痛的问题