新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜

CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと

[anakuma_guuma]

> IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。

[door-s-dev]

Chromeでもpartial support。ブラウザごとのサポート状況に差がある時点で使いにくい

[Cherenkov]

borderハックではないcss三角 吹き出し。ブコメにインラインsvgあり

[pere_ponta]

“clip-path”

[d4-1977]

IE11にはさよーならー👋🏻 この方法、他にも実装に使えそうな気がする

[hirose504]

“IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。”

[spark7]

svgは背景に設定すんのがなんか面倒。三角はborderでも別に良いかな。

[fujis_a]

“IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。”

[gamecome]

指定の形で切り抜くって事だから、JSで動的に位置動かしたら、見えるのかな見えないのかなみたいなギリギリが面白い？

[niemands]

SVGにしない理由はなんやろうか。

[I_L_S]

CSSで図画書きたい勢のモチベーションがどこにあるのかがわからない。

[alphabet_h]

なんで殆どのブラウザで完全サポートもされてないプロパティなのに「さらば」とか言えるんだ… 仕様変更きたらいちいち直す必要のあるプロパティよりボーダー使った方がまだ安全。 若しくは普通にインラインSVG

[Keisuke69]

“IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました”

[itochan]

▲◀▼▶、△（略）、⊿、🔺（略）、　🔼...

[Shinwiki]

どんどん汚くなっていく

[cartman0]

長方形が4つの三角形からできてる幾何ハックから遂に抜け出したのか / 誘導のアイコン代わりに便利，いまだったらiconフォントで良さそうだけど

[mayumayu_nimolove]

作り方より使い道を知りたい