HTML実装 コンテンツの区切り線を滑らかな凸のような形を表現したい。

Question

HTMLとCSSで下記のような区切り線を実装したいです。

このような形でホームページの区切り線を実装したいと思っています。

台形のような形をボーダーで作り、absoluteで浮かし配置しようとしましたが、
角を丸くすることができずうまくできません。

画像は使いたくはないのですが、
画像を使い実装する方法も教えていただきたいです。

該当のソースコード

  <div class="content">
    <div class="box"></div>
    <h3 class="title">TEST</h3>
    <div class="inner">

    </div>
 </div>

.content {
  background-color: lightblue;
  position: relative;
  height: auto;
}

.title {
  position: absolute;
  top:-5px;
  text-align: center;
  font-size: 40px;
  position: relative;
  line-height: 1em;
  text-shadow:0px 2px 1px #ffffff;
}

.box {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  border-radius: 26px 26px 6 6 / 80px 80px 6 6;
　//効かない
  border-bottom: 60px solid lightblue;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  height: 0;
}
.inner{
  height: 200px;
}

この方法では不可能でしょうか？
他にやり方や、実装できる方法などありましたら
ご教授お願いします。

Answer 1

なるべく画像をやめたいのであれば、SVGを使う方が良いと思います。
CSSでやる場合、綺麗に作るのは結構難しくなり、アニメーションとかも付けづらいと思います。

一応、上部だけ無理矢理border-radiusでそれっぽくしてみましたが、あまりお勧めしません。

<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
">
    <div style="
        height:0px;
        width:400px;
        border-style:solid;
        border-top-width:0px;
        border-bottom-width:40px;
        border-bottom-color:#aaffff;
        border-left-width:40px;
        border-left-color:transparent;
        border-right-width:40px;
        border-right-color:transparent;
        border-radius: 20% 20% 0px 0px/ 140% 140% 0px 0px;
    ">
    </div>
    <div style="
        background-color:#aaffff;
        height:40px;
        width:700px;
    ">
    </div>
</div>

Comments

[pepe1122]

ありがとうございます。
教えていただいたコード参考にしましたが
やはり結構難しのですね。SVGもよくわからなかったため今回はPNGで画像を作成し実装しようと思います。ありがとうございました。
ありがとうございました。