IE11検証:グラデーションボーダーのチケットレイアウト、表示できるかな?

Pocket
LINEで送る

まずは参考サイト

英語サイトです。Medhat Dawoudさんによる、CSSで角丸+ボーダーのグラデーション+切り込みを駆使したイカしたチケット実装5パターンの記事です。


で、実際どう構築しているのかの解説記事を日本語に翻訳してくれたのが、皆の先生Colissさん。

IEはCODEPENが使用できない(見ることもできない)ので、IEチェック用にデモページを作成しました。

デモページ

正直、見るからにIE非対応なんですが、それでも「IE非対応です」と証明しておきたい訳です。うっかりIEでも対応されていたら儲けもんですし。

IEではCSSの変数が使えない、デモページはBootstrapベースなので何か干渉しているところは調整しています。

デモページの内容

  • やり方その1: 2つのdivを左右に乗っけてカバーにする
  • やり方その2: 子要素のborderを透明にする
  • やり方その3: clip-pathを使う
  • やり方その4: divを積み重ねる
  • やり方その5: FigmaでSVGを作り使う
IE11チェック用デモページ

結論

デモページにも書きましたが、完全にIE対応しなきゃならない場合、SVG一択。
現実的なのはIEのみデザインを変えて、左右の丸い切り込みを無し、またはborderを使わず背景色を敷く等のアレンジですかね。

Pocket
LINEで送る

back to top