中空三角形を実現

背景: プロジェクト中に、中空の三角形の効果を必要とするタブの切り替えがありました。バックエンドエンジニアの私には、どうやって書けばいいのか全く分かりません。インターネットで他の人の実装方法を調べてみると、ほとんどが実線の三角形でした。その後、ようやく中空の三角形を実現したものを見つけて、涙があふれました。実装エフェクトは比較的大まかですが、アイデアはまだ比較的明確であり、そこから学び、元のベースにいくつかの改善を加えてエフェクトを追加しました

。

中空三角形原理: 主に要素疑似クラス (:before,:after) を使用して実装されます

レンダリング: ps: 色の変更で移動

実装コード: