丸い区切りをCSSで作成する
border-radiusの値を大きくすることによって可能な表現です。しかし、普通にやると次のように端が丸まってしまいます。
See the Pen コンテンツの区切りを円弧で表現する by バイオハックch (@synd1090) on CodePen.
丸まっている部分を画面の外に出す
marginとpaddingでborder-radiusの要素を枠の外にはみ出させます。また、はみ出した分は表示しないように、親要素にoverflow: hidden;を指定しています。すると、自然な形の円弧になりました。
See the Pen コンテンツの区切りを円弧で表現する【訂正版】 by バイオハックch (@synd1090) on CodePen.
無地だけでなく、background-imageで背景画像を設置することもできます。
