邊界半徑曲線向內？

Question

如何讓邊界向內彎曲而不是向外彎曲？

例如 - 這是向外彎曲：

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-image: linear-gradient(#ff9d2f, #ff6126); 
 
    border-bottom-left-radius: 50% 20%; 
 
    border-bottom-right-radius: 50% 20%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

我想它想的曲線向內，這可能嗎？

Answer 1

像下面的例子

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-image: linear-gradient(#ff9d2f, #ff6126); 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
} 
 

 
header:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 30%; 
 
    width: 100%; 
 
    background: #fff; 
 
    border-top-left-radius: 50% 20%; 
 
    border-top-right-radius: 50% 20%; 
 
    user-select: none; 
 
}

<header> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>

Answer 2

可以使用另一個盒子模擬它，如果這是你所需要的。

header { 
 
    position: relative; 
 
    height: 300px; 
 
    background-image: linear-gradient(#ff9d2f, #ff6126); 
 
} 
 

 
header:after { 
 
    content: " "; 
 
    width: 100%; 
 
    height: 100px; 
 
    position: absolute; 
 
    background-color: white; 
 
    bottom: 0; 
 
    border-top-left-radius: 50% 40%; 
 
    border-top-right-radius: 50% 40%; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 100px 0; 
 
    font: 44px "Arial"; 
 
    text-align: center; 
 
} 
 

 
header h1 { 
 
    color: white; 
 
}

<header> 
 
    <h1>Header Content</h1> 
 
</header> 
 

 
<section> 
 
    <h1>Section Content</h1> 
 
</section>