導入

数年前までは、Web サイトの背景の形状やセクションを長方形以外にしたい場合、必要に応じて追加される静的な PNG または JPEG 画像をデザイナーに提供してもらう必要がほとんどでしたが、CSS はあれから長い道のりを歩んできました、友よ。

ページのコンテンツを異なる色の背景セクションに分割し、純粋な白と柔らかいグレーの色を交互に配置する Web サイトの更新に取り組んでいたとき、デザインのモックアップには、下端が上に傾いた 1 つのセクションが含まれていました。一般的なブロック要素のように、ページを完全に 90 度の角度で横切るのではなく、右に移動します。

これを行うためにデザイナーに背景画像の作成を依頼することもできましたが、代わりに CSS の力を使って自分でできるかどうかを確認したいと思いました。そしてなんと、CSS クリップパスを使えばそれができたのです。

DOM 内の興味深い形状やビジュアルは、もはや純粋にデザイナーの領域ではありません。CSS クリップパスなどのツールを使用すると、開発者は要素を再形成することができます。その方法を説明します。

CSS クリップパス

私のように、CSS クリップパス プロパティにあまり詳しくない場合は、要素のどの部分を表示するかを設定するクリッピング領域が作成されます。領域の内側にある部分は表示されますが、外側の部分は非表示になります。

MDN クリップパス ドキュメントのデモ。さまざまなクリップパス オプションにより、熱気球とテキストのさまざまなビューが提供されます。

clip-path プロパティはさまざまな値を受け入れることができます:

• 。クリッピング パスが定義された SVG 要素の URL などの値を受け入れます。
• 、margin-box や border-box などの値を受け入れます。
• 。circle() や rect() などの値を受け入れます。
• global-values。inherit や revert などの値を受け入れます。

と の値は、1 つのクリップパスに結合することもできます。

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

この投稿では、クリップパスが受け入れることができるすべてのプロパティと、それらを組み合わせて非常に複雑な形状を作成する方法については詳しく説明しません。さらに詳しい情報と、clip=path の動作例が必要な場合は、Mozilla ドキュメントから始めることをお勧めします。

clip-path が受け入れる プロパティの 1 つは polygon() です。これが、傾いた背景セクションに必要なソリューションになりました。

CSSで再作成する必要があったポリゴン

CSS で作成する必要があった灰色のポリゴンの背景。

上の画像は、CSS クリップパスの Polygon() プロパティを使用して再作成する必要があった灰色の背景セクションのスクリーンショットです。そして最初に行う必要があるのは、CSS を適用する HTML 要素をいくつか作成することでした。

polygon() クリップパスと rect() クリップパス

なぜクリップパスでrect()プロパティの代わりにpolygon()プロパティを使用することにしたのか疑問に思われるかもしれません。この 2 つは似ていますが、polygon() はより複雑な多角形の形状を作成でき、多角形の各頂点を定義するための座標のペアを受け入れることで高度な設計に優れた汎用性を提供します。一方、rect() は長方形の形状のみを処理できます。

HTMLとCSSを設定する

私が取り組んでいたサイトは、Go ベースのフレームワークである静的サイト ジェネレーター Hugo に依存していました。 Hugo はテンプレートを使用してサイトの HTML をレンダリングするため、HTML の知識がある場合は、以下のコード例は比較的馴染みがあるはずです。

テンプレートに関する注意:

JSX コンポーネント、Pug または Handlebars を備えた Node.js、または Jekyll を使用したことがある場合は、Hugo のテンプレートも同様です。Go 変数と関数を含む HTML 要素に {{ }} が散りばめられており、テンプレートのどこにでも正しい情報が表示されます。

が注入されます。

このセクションの前景にあるパズルのピースにちなんで、私がページの「パズル セクション」と名付けたコードを次に示します。この記事の目的と明確さのために、テンプレートに挿入された Go 変数を生成された HTML に置き換えました。

シングル.html

  

    

    

      

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
          
        
      
    

     
  

コードのこのセクションは比較的コンパクトですが、議論する価値があります。 HTML 要素に加えて、レスポンシブ Web デザイン用のオリジナルのオープンソース CSS フレームワークの 1 つである Bootstrap ライブラリから派生したかなりの数の CSS クラスがあります。

カスタム スタイルを追加するために使用した about-body などのカスタム クラスの中には、container、row、col-12 またはcol-md-6、mb-5、mb-3 などのクラスがあります。

後者のクラスはすべて Bootstrap クラスであり、ビューポートが特定の幅 (col-md-6) を超える場合、または margin-bottom を適用するときに、画面上のテキスト要素と画像要素がページの幅を共有するように機能します。

タグ (mb-3 または mb-5) に一定量を追加します。

Bootstrap クラスはこの投稿の要点から外れていますが、注目すべきクラスは、すべてのテキストとパズルのピースの画像をラップする パズルセクション です。

このパズル セクション クラスでは、クリップ パス プロパティを追加して、テキストと画像の後ろに明るい灰色の背景を、わずかに傾いた右上がりのデザインで表示します。

CSS クリップパスをシェイプパズルセクションに追加します。

通常の長方形の

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}