【忍者系CSS】CSSで作るまきびし

公開日：2022/01/31

【忍者系CSS】CSSで作るまきびしのサムネイル画像

今回は遊び心シリーズということで、
忍者のサイトぐらいにしか使わないのでは？と思われる「CSSで作るまきびし」を解説していきたいと思います。

まきびし（wiki）というと忍者が逃げるときに敵の足止めに使う忍具の一つです。
ヤンキー漫画を見ていると画鋲をまきびし代わりにしているのはよく見かけますね。（真似してはいけません。）

CSSは四角、三角、丸などの簡単なものから星型や平行四辺形や「まきびし」まで画像を使わずとも、色々なオブジェクトを作ることができます！

画像ではなく、なぜCSSで作る必要があるのか？

等が挙げられます。

どうでしょうか？メリットだらけです。

1点だけだと思います。

ただ、一度作ってしまうと他のプロジェクトでも使い回せるので、長い目で見たら低コストと言えるでしょう。

以下のDEMOサイトよりご確認下さい。

重要なポイントとして、
まきびしのとげとげの形は「clip-path」というCSSを使用して作成しています。

clip-path: polygon(50% 0%, 40% 60%, 0% 100%, 50% 72%, 100% 100%, 70% calc(70% - 2px), 100% 62%, 60% 60%);

clip-pathの特徴として要素に対して座標を設定、座標の範囲外をクリッピング（切り抜く）するという便利なCSSになっています。

座標となると小難しそうですが、大丈夫です。ジェネレータを使用しましょう。

今回使用したジェネレータがClippyというジェネレータになります。直感的に座標となる丸をグリグリ移動させてページ下部にあるCSSをコピペするだけで実装できます。

200×200の黒塗りの図形をジェネレータでクリッピングした状態です。

より立体的にするために影と輪郭をつけていきます。

どうでしょうか！できました！

今回は特殊なものを作ってみましたが、コーディング力のレベルアップの為に、日常的に見かけるものをCSSで作ってみるとより力がつくのかなと思います。

作ってみて、楽しいです。これからも色々な忍具を作っていつかは忍になりたいと思います。