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

まずは参考サイト

英語サイトです。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チェック用デモページ

それぞれのキャプチャ

わざわざIE11で確認していただくのも悪いので、ChromeとIE11それぞれの表示結果をキャプチャに取りました。

やり方その1: 2つのdivを左右に乗っけてカバーにする

Chromeでの見え方
IE11での見え方

やり方その2: 子要素のborderを透明にする

Chromeでの見え方
IE11での見え方

やり方その3: clip-pathを使う

Chromeでの見え方
IE11での見え方

やり方その4: divを積み重ねる

Chromeでの見え方
IE11での見え方

やり方その5: FigmaでSVGを作り使う

Chromeでの見え方
IE11での見え方

結論

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