最近のWebデザインは写真とタイポグラフィ、そしてシンプルな区切り(グリッド)などで表現されることも多く、その中で少しでも面白い見せ方を考えると、曲線や角度など、ちょっとしたアクセントが欲しくなったりします。 ということで、今回はこちら。 ワンカラムに多いコンテンツ区切りを角丸で描く つまりこれですね。 これまでは「マスク画像」として、png画像を乗っけたりして一部を隠すように表現していたことが多いかと思いますが、よくよく考えたら別にCSSでできるもんねぇ。 今までこの手のコーディングをする機会がなく、使いそうで使ってなかったので、メモとして残します。 まずはhtml <div class="wrap"> <div class="arc"> <p> なんか本文 </p> </div> </div> class=”arc”部分の下部で円弧を表現します。 説明が面倒なのでCSSはこちら .wr