CSS3のみで三角形を作る方法｜グラデーションにこんな使い方が…

CSS3のグラデーション機能を使って三角形を作る方法を紹介します。 2年ほど前に書いたこの記事がけっこう人気なので、もう1つの方法を紹介してみます。 正直↑の方法を使ったほうが形のバリエーションが幅広いし、対応ブラウザも多いです。ただ、今回紹介する方法のほうが簡単。

順を追って解説していきます。

作り方

今回作るのは「▶」←こんな形の三角形です。

まずは正方形を用意します。 斜めにグラデーションをかけます。片方は透明（transparent）にしましょう。 「transform:rotate(45deg)」で45度回転させます。 これだけです。単純な三角形を作るだけなら、この方法のほうが簡単で理解しやすいですね！
一応、複数のグラデーションを使えばこんな感じのラベルとかも作れます。ちょっとややこしいですが… 今のところ三角形はborderを使うのが主流っぽいですが、この方法も覚えておけば便利です。作りたい形によって使い分けましょう！