Question

是否可以在CSS的div底部创建完整的曲线？
曲线应在父元素的边界处停止。

我尝试过：border-radius: 0 0 50% 50% / 50px;，但这给了它奇怪的结局。

这是我的html（标头应具有弯曲的底部）：

<div class="container">
    <header class="home__header">
        <h1 class="title">Gift<span class="home--apos">'</span>it</h1>
        <img src="assets/img/presents.svg" alt="presents" class="home__image">
    </header>
    <main class="home__content">
        <div class="home--container">
            <p>Heb je wel eens een cadeau vergeten kopen?<br> 
                Weet je niet waar je het best kan kopen?<br> 
                Ga dan naar onze Cadeau planner!</p>

            <a class="home__btn" href="form.html">
                plan it!
            </a>
        </div>
    </main>
</div>

enter image description here

谢谢！

Answer 1

您可以执行以下操作：

.home__header {
  background-color: teal;
  border-bottom-left-radius:100%;
  border-bottom-right-radius:100%;
  width: 250px;
}

https://codepen.io/bkiss/pen/NWWeZWO

我可以在CSS中创建底部弯曲的div吗？

1 个答案: