clip-pathを使ってWebページの表現方法を増やそう！

突然ですが、皆さんCSS3を活用していますか？ 複雑なレイアウトを画像で済ませていませんか？

昔はfloatプロパティなどを活用して「あーじゃないこーじゃない」と作っていた複雑なデザインも、今やflexboxプロパティが多くのブラウザでサポートされたことによって、低労力＆少ないコードで再現することができるようになりました。
CSS3にはflexboxプロパティのほかにも、複雑なデザインやおしゃれなデザインを簡単に作れる便利なプロパティが沢山あります。

今回は、その中でも複雑なデザインを再現することができる「clip-path」プロパティをご紹介します。
clip-pathは要素を自由自在に切り抜くことができるプロパティです。
切り抜きといえばこれまでは「clip」プロパティもありましたが、こちらは現在非推奨となっており、clip-pathに置き換えられました。

※現在clip-pathは勧告候補であり、全てのブラウザで機能するものではありません。
詳しくはCan I use CSS clip-path propertyをご確認ください。

早速ですが、clip-pathを使ったサンプルを見ていきましょう。

多角形（六角形）に切り抜き

.sample1 {
    background: #fbd818;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    margin: 5px;
}

六角形など多角形を切り取る際にはpolygon()という値を使用します。
このpolygon()を活用すれば様々な形を再現することが可能です。
サンプルではpolygon()とGridLayoutを組み合わせることで、ハニカム構造をCSSだけで再現しています。

画像をアイコンでマスキング

.sample2 {
    width: 200px;
    height: 200px;
    clip-path: polygon(0 0, 13% 0, 50% 80%, 87% 0, 100% 0, 100% 100%, 87% 100%, 87% 30%, 55% 100%, 45% 100%, 13% 30%, 13% 100%, 0 100%);
    position: relative;
    overflow: hidden;
}
.sample2::before {
    content: "";
    width: 200px;
    height: 200px;
    background: url(https://www.mitsue.co.jp/img/index/kv/default.jpg)center center/cover no-repeat;
    position: absolute;
}

最近は画像や動画をアイコンでマスキングしているようなWebページをよく見かけますが、clip-pathプロパティを使えば難なく行うことができます。
iPhone Xの商品紹介ページでこのような手法が使用されていましたね。
iPhone Xのページはcanvas要素で実装していますが、簡単なものであればclip-pathプロパティでも実装が可能です。

clip-pathでテキストアニメーション

.sample3 {
    font-size: 2.4rem;
    position: relative;
    display: inline-block;
}
.sample3::before,.sample3::after {
    content: "Mitsue-Links";
    font-size: inherit;
    position: absolute;
    top: 0;
    background: #fff;
}
.sample3::before {
    left: 0px;
    clip-path: inset(35% 0 60%);
    animation: sample3anime1 .6s linear 0s infinite;
}
.sample3::after {
    right: 0;
    clip-path: inset(50% 0 40%);
    animation: sample3anime2 .6s ease .2s infinite;
}

clipプロパティで実装していた動きは全てclip-pathで代替可能です。
こちらのサンプルは疑似要素の一部をパス抜きしてCSSのアニメーションで動きをつけているだけなので、とても簡単に実装できます。

さて、いくつかのサンプルを見ていただきましたが、いかがだったでしょうか？
今回ご紹介した内容のほかにもclip-pathを使えば様々な形を模ることができます。
表現の可能性が詰まっているこのプロパティ、皆さんも是非使ってみてください。