【css】clip-pathを使った文節の境界線を多角形で作るデザインコード&ツール

Author

トッド(Todd)

What Content?

clip-pathで複雑な形

お洒落なWEBサイトには、文節の境界線に多角形が使われている事がありますよね。ここではclip-pathプロパティーを使って作ってみたモノを紹介したいと思います。


ここでは、CSSのclip-pathプロパティーを使い、WEBページレイアウトに使えるオシャレに文節の境界線として活用することが出来るパーツ&ツールの紹介です。

完成デモ↓

デモ見出し

このように、clip-pathで作成した三角形を要素の下に設置することで境界線をもつボックスようなパーツとして活用することが出来ます。


※本当は四隅を埋めて表示させたかったのですが記事ページの都合上、隙間のあるビジュアルをお許しください。

上記のデモで、パッとしない方の為にこの記事で紹介しているclip-pathを使用して作成した固定ページで使用例を載せておきます。

ラクラク

clip-pathでの造形が簡単になるツール


Clippy clip-path maker

CSS clip-path makerというWEBツールを使えば、複雑な値の計算をする必要なく、視覚的にクリップパスを用いた多角形の作成が簡単に行うことが出来ます。


clip-pathプロパティを使いたい場面でこのツールを使わない理由はありません。

あらかじめ、プレビュー時の表示サイズが設定できるのでスマホやPCなどの表示規格が異なる場面での様子確認ができます。


デモのコード

CSS
.hero1 {
    width: 100%;
    height: auto;
    padding: 0 auto;
    margin: 0 auto;
    background: #fafafa;/*background-imageで画像を背景にしても良い。*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.demo-h2 {
 font-size: 2rem;
 font-weight: bold;
 text-align: center;
 padding: 3%;
}
.content-separation {
    padding: 3em 0.5em 5em;  
    position: relative;
}
.content-separation:after {
    content: "";
    display: block;
    background: #333;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1em;
    height: 6em;
     -webkit-clip-path: polygon(0 70%,100% 0,100% 100%,0 100%);
    clip-path: polygon(0 70%,100% 0,100% 100%,0 100%);
}
HTML
<div class="hero1">
<div class="content-separation">
<p class="demo-h2">デモ見出し</p>
<p>このように、clip-pathで作成した三角形を要素の下に設置することで明確な境界線をもつボックスようなパーツとして活用することが出来ます。</p>
</div>
</div>

CSSで紹介しました、 -webkit-clip-path: polygon(0 70%,100% 0,100% 100%,0 100%);
clip-path: polygon(0 70%,100% 0,100% 100%,0 100%);の箇所をclip-path makerで作成した好みの図形に変更して使ってもらえると良いでしょう。

コメントを残す

メールアドレスが公開されることはありません。