三角形効果を実現するCSS

方法 1: border を使用して境界線を設定します

要素には高さと幅があります。

リーリー

効果:

transform アトリビュートを使用して三角形を回転し、目的の効果を実現します。

方法 2: 境界線を使用して三角形をサポートします

リーリー

効果:

アプリケーションシナリオ: 234 をクリックするか、クリックして選択すると、三角形が対応するオプションを指します

ヒント:

1. 三角形を実装するために、after や before などの疑似要素を頻繁に使用する方法を学びます

2. 2 つの方法の違い: 2 番目の方法で設定された三角形の背景色と境界線の色は同じですが、最初の方法で設定された三角形の背景色と境界線の色は異なる場合があります。さまざまなアプリケーションシナリオの影響に応じて。

2 番目の方法では、異なる色の 2 つの三角形のカバーを使用して、背景色と境界線の色の異なる効果を実現することもできます。