セクション背景の区切りを曲線にする

最初は下に丸みを帯びていて、スクロールすると上に丸みを帯びている背景を作成する。

<div class="wrap">
  <div class="content01"></div>
</div>
<div class="wrap">
  <div class="content02"></div>
</div>
<div class="wrap">
  <div class="content03"></div>
</div>
.wrap {
  overflow: hidden;
}
.content01 {
  background: #1CB4D3;
  border-bottom-left-radius: 1000px 200px;
  border-bottom-right-radius: 1000px 200px;
  height: 200px; /* コンテンツが入っているのならばいらない */
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
}
.content02 {
  height: 100px; /* コンテンツが入っているのならばいらない */
}
.content03 {
  background: #1CB4D3;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  height: 200px; /* コンテンツが入っているのならばいらない */
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
}

See the Pen CSSでコンテンツの区切りを曲線にする by junpei (@junpei-sugiyama) on CodePen.

ポイントとなるCSSのプロパティは以下の通り。

border-top-left-radius左上の角丸を指定
border-top-right-radius右上の角丸を指定
border-bottom-left-radius左下の角丸を指定
border-bottom-right-radius右下の角丸を指定

border-top-left-radiusとborder-top-right-radiusが上を曲線にしたい時、border-bottom-left-radiusとborder-bottom-right-radiusが下を曲線にしたい時に使用する。
なので『border-top-left-radiusとborder-bottom-left-radius』といった組み合わせは基本的に使わない。

そしてこのプロパティは2つの数値を指定する。
border-top-left-radius:　水平方向の半径　垂直方向の半径;
この半径は『長さ』か『パーセント』で指定できる。
上記の例では最初は『px』で指定、下の方は『パーセント』で指定している（カーブの形が若干違う）。

また、セクションを囲ってoverflow: hidden;をしないと横スクロールしてしまうため、.wrapにはoverflowを記述している。

なお、marginが無いと曲線の左右が丸まってしまう。これを回避するためにネガティブマージンを指定する（マイナス方向のmargin）。このmarginは数値が大きいほど丸くならずに真っ直ぐになっていく（マイナス方向に大きいという意味）。
同時に、marginと同じ数値のpaddingを指定しないとコンテンツも左右に飛び出てしまうので、marginでマイナスした分をpaddingで相殺している。

inserted by FC2 system