我怎樣才能讓CSS曲線和按鈕的下方

Question

我怎樣才能讓CSS這樣的，如下圖：

<div class="logo"> 
    <img src="assets/logo/1.jpg"/> 
</div> 
<div class="btn"> 
    <button>First</button> 
    <button>First</button> 
    <button>First</button> 
    <button>First</button> 
</div> 

Answer 1

你可以做到這一點與生成的內容。

我已經創建了一個例子給你

.container { 
 
    width: 500px; 
 
} 
 

 
.logo { 
 
    position: relative; 
 
    overflow: hidden; 
 
    z-index: 1; 
 
} 
 
.logo:after { 
 
    content: ""; 
 
    width: 300%; 
 
    height: 500px; 
 
    background-color: gray; 
 
    position: absolute; 
 
    bottom: -96%; 
 
    left: -100%; 
 
    z-index: 2; 
 
    border-radius: 50%; 
 
} 
 

 
.btn { 
 
    background-color: gray; 
 
    padding: 20px; 
 
}

<div class="container"> 
 
<div class="logo"> 
 
    <img src="https://placeimg.com/640/480/any"/> 
 
</div> 
 
    <div class="btn"> 
 
    <button>First</button> 
 
    <button>First</button> 
 
    <button>First</button> 
 
    <button>First</button> 
 
</div> 
 
</div>

和一支筆：https://codepen.io/faw/pen/XRqdOq