Как достичь этого овального макета с помощью CSS

Question

Как достичь этого макета с помощью CSS?

Answer 1

Вы можете попробовать это: https://jsfiddle.net/dqhx5cf5/

HTML:

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

CSS:

.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; 
} 

НО с Firefox изогнутая линия не появляется пунктирная, потому что не совместим с Mozilla, но если вы проверите его от IE и Chrome он работает также.

Answer 2

Вы можете сделать форму, как следующим образом:

.shape { 
 
    background-color: #ccc; 
 
    border-radius: 150px 150px 0 0; 
 
    bottom: 0; 
 
    height: 100px; 
 
    position: absolute; 
 
    width: 75px; 
 
} 
 

 
.parent { 
 
    background-color: #2e0854; 
 
    height: 150px; 
 
    position: relative; 
 
    width: 75px; 
 
}

<div class="parent"> 
 
<div class="shape"></div> 
 
</div>

Узнайте больше о форме от here

Answer 3

Я решил ваш вопрос. Надеюсь, это будет полезно.

Благодаря

*{margin:0;} 
 
.container{width:400px;border:2px solid #666; height:400px;} 
 
.main{background:#666; width:100%; height:200px; position:relative;overflow:hidden;} 
 
.oval{background:#fff;width:100%;height:200px;position:absolute;bottom:-100px;border-radius:50%;} 
 
.oval-dashed{background:#fff;width:100%;height:200px;position:absolute;bottom:-110px;border-radius:50%; border:1px dotted #666}

<div class="container"> 
 
<div class="main"> 
 
    <div class="oval"></div> 
 
    <div class="oval-dashed"></div> 
 
</div> 
 
    </div>

Answer 4

Для того, чтобы сделать его принять по ширине контейнера (в данном примере тело):

https://jsfiddle.net/ehoo6pLt/9/

HTML

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

CSS

.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; 
}