Html 如何在CSS中创建一个DIV边界中间的曲线？

我试图在<代码> div <代码>边界中间创建曲线，但我不知道如何：

.集装箱{
宽度：100%；
高度：300px；
边框：1px实心橙色；
}

您需要第二个元素，其设置与下面的代码片段类似

重要细节：

• 边界半径

• 两个元素的相对/绝对位置组合，半圆（绝对位置）是矩形的子元素

• 左

  和
  变换中间水平位置的半圆设置
  

• top:-1px

  设置用于垂直位置的半圆，并覆盖矩形的边框和白色背景以真正覆盖矩形

• 以及其他一切；-）

.container{
宽度：100%；
高度：300px；
边框：1px实心橙色；
位置：相对位置；
}
.半圆{
宽度：200px；
高度：100px；
位置：绝对位置；
左：50%；
顶部：-1px；
转化：translateX（-50%）；
边框底部：1px纯色橙色；
左边框：1px实心橙色；
右边框：1px实心橙色；
边框左下半径：100px；
边框右下半径：100px；
背景：#fff；
}

您可以使用伪元素 不需要其他元素

边框还带有伪元素，可以隐藏线条

.container{
宽度：100%；
高度：300px；
溢出：隐藏；/*半圆-顶部不可见*/
位置：相对位置；
}
.容器：：之前{
内容：“；
位置：绝对位置；
顶部：0px；
左：0px；
底部：0px；
右：0px；
边框：1px实心橙色；
}
.容器：：之后{
内容：“；
位置：绝对位置；
/*大小*/
宽度：200px；
高度：200px；
/*水平中心*/
左：50%；
左边距：-100px；
/*垂直位置*/
顶部：-100px；
边界半径：50%；/*圆形魔法*/
边框：1px实心橙色；
背景色：白色；
}

<div class="container"></div>

<style>
  .container{
    width:100%;
    height: 300px;
    border: 1px solid orange;
  }
</style>