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

まずは参考サイト

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

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

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

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

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

IE11チェック用デモページ

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

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