画像をCSSで好きな形に切り抜けるclip-pathプロパティって知っていますか？ SVGのパスで自由にクリッピングできちゃうので、おしゃれサイトの演出などにとても重宝しそうです。 Webの表現はおもに長方形です。一方、印刷メディアではさまざまな形状が使わ ...

CSSでキャラクターを描くのは、まるでデジタル折り紙のような楽しさがあります。折り紙では、紙を折ったり切ったりして複雑な形を作るように、CSSではclip-pathを使ってパーツごとに形を切り出し、それらを組み合わせてキャラクターを表現します。

これまで CSS だけを利用して三角形を作る際は border を利用することが多かった。 border を利用した実装だと何を表現しているのか一見してもわかりづらい。 実装方法 borderではなく、clip-pathプロパティにpolygon()関数を利用する。

まず「疑似要素」を作成したいので"oisition: absolute"で絶対指定し、 "bottom"と"right"で配置したい場所に固定します。 そこから"height"と"width"で「正方形」を作成し、 ”clip-path”プロパティの値である”polygon”を使います。 ・最初の0% 100% これはX軸のスタート ...