Content?clip-pathで複雑な形お洒落なWEBサイトには、文節の境界線に多角形が使われている事がありますよね。ここではclip-pathプロパティーを使って作ってみたモノを紹介したいと思います。ここでは、CSSのclip-pathプロパティーを使い、WEBページレイアウトに使えるオシャレに文節の境界線として活用することが出来るパーツ&ツールの紹介です。完成デモ↓デモ見出しこのように、clip-pathで作成した三角形を要素の下に設置することで境界線をもつボックスようなパーツとして活用することが出来ます。※本当は四隅を埋めて表示させたかったのですが記事ページの都合上、隙間のあるビジュアルをお許しください。上記のデモで、パッとしない方の為にこの記事で紹介しているclip-pathを使用して作成した固定ページで使用例を載せておきます。makerというWEBツールを使えば、複雑な値の計算をする必要なく、視覚的にクリップパスを用いた多角形の作成が簡単に行うことが出来ます。clip-pathプロパティを使いたい場面でこのツールを使わない理由はありません。プレビュー時の表示サイズが設定できるのでスマホやPCなどの表示規格が異なる場面での様子確認ができます。#fafafa;/*background-imageで画像を背景にしても良い。class="demo-h2">デモ見出し</p><p>このように、clip-pathで作成した三角形を要素の下に設置することで明確な境界線をもつボックスようなパーツとして活用することが出来ます。makerで作成した好みの図形に変更して使ってもらえると良いでしょう。【STINGER8】3種メニュー「header・accordion・footer」のデザインカスタム(アイコン有)【Wordpress】SVG画像をロゴや記事内画像に使用し、ボヤけない一体感のあるページを目指そうこの記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。