div上的曲線底部

Question

我有一個div，我想要一個彎曲的底部邊框。與圖片類似，但不在頂部。我試過使用邊界半徑，但似乎並沒有創建一個彎曲的底部。任何想法如何做到這一點，而不使用背景圖像。

Answer 1

如下圖所示我的片段，您可以在不同的角落結合每兩個值的邊界半徑：

.x { 
 
width: 240px; 
 
height: 120px; 
 
background: #fa0; 
 
border-bottom-left-radius: 120px 40px; 
 
border-bottom-right-radius: 120px 40px; 
 

 
}

<div class="x"></div>

Answer 2

您正在尋找類似的東西？

#tv { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin: 20px 0; 
 
    background: red; 
 
    border-bottom-left-radius: 100px 40px; 
 
    border-bottom-right-radius: 100px 40px; 
 
}

<div id="tv"></div>

Answer 3

呀，如何創建兩個div，一個在另一個裏面，然後是你的麥粒腫他們是這樣的：

<style> 
    .outer{ 
     width:1000px; 
     height:100px; 
     border-radius:100%; 
    } 
    .inner{ 
     width:100px; 
     height:100px; 
     background:gold; 
     overflow:hidden; 
    } 
</style> 

<div class="outer"> 
    <div class="inner"></div> 
</div> 

你明白了吧？