Html 如何使用CSS实现这种椭圆形布局

如何用CSS实现这种布局

---

您可以按以下方式制作形状：

.形状{ 背景色：ccc； 边界半径：150px 150px 0； 底部：0； 高度：100px； 位置：绝对位置； 宽度：75px； } .家长{ 背景色：2e0854； 高度：150像素； 位置：相对位置； 宽度：75px； } 您可以尝试以下方法：

HTML:

---

但是对于Firefox，曲线不会显示为虚线，因为它与mozilla不兼容，但是如果你从IE和Chrome上检查它，它也可以工作。

我已经解决了你的问题。希望这会有帮助

谢谢

*{边距：0；} .container{宽度：400px；边框：2px实心666；高度：400px；} .main{背景：666；宽度：100%；高度：200px；位置：相对；溢出：隐藏；} .oval{背景：fff；宽度：100%；高度：200px；位置：绝对；底部：-100px；边框半径：50%；} .椭圆形虚线{背景：fff；宽度：100%；高度：200px；位置：绝对；底部：-110px；边框半径：50%；边框：1px点666}

---

要使其适应本例中的容器宽度，主体：

HTML

---

展示你所尝试过的。简单的方法是将其设置为背景。。。困难的方法是你尝试一些东西，而不是仅仅要求解决。这些可能会有帮助-，

<div class="rectangle"><div class="circle"></div></div>

.rectangle{
   background-color: darkblue;
   width: 300px;
   height: 500px;
   overflow:hidden;
}

.circle{
   border-radius: 50%;
   width: 600px;
   height: 600px;
   background-color: #ddd;
   position:relative;
   left: -150px;
   top: 100px;
   border: 2px dashed darkblue;
   box-shadow: 0 0 0px 5px #ddd;
}

 <div class="elliptical-container">
     <h1>Content</h1>
 </div>

.elliptical-container {
    margin-top: 100px;
    box-sizing: border-box;
    height: 100%;
    background: #EEEDEE;
    border-top-left-radius: 50% 75px;
    border-top-right-radius: 50% 75px;
    box-shadow: 0 0 0 4px #EEEDEE;
    border-top: 1px dashed #3B2053;
}