こんにちは、 ゆうや（@yuyaphotograph）です！
本記事では、CSSで三角形を作る方法をご紹介します。
読み終えた頃には、カードデザインブロックの左上や右下にちょこんと配置されていたりするあれを作れるようになっていることでしょう。
それでは参ります！
CSSで三角形を作ってみよう！
完成イメージ
今回作る三角形のイメージを共有いたします！
こんな感じです(^o^)
↓↓↓
左上と右下に三角形配置
実際に使用する時は、上のカードデザインブロックが横２列でずらーっと並ぶようなレイアウトなどが考えられます！
flexボックスで親要素にflex指定して子要素（カードデザインブロック）の横幅をcalcプロパティで計算して２列にするといった感じでしょうかね！
↓↓↓
２列のカードデザイン
CSSで三角形を作るポイント
三角形のコードを見る前にまず三角形を作るポイントをさらっと確認！
- 三角形を配置したい親要素にposition:relativeを指定する
- 三角形はposition:absoluteを指定、絶対位置への配置とする
- 三角形はborder-left、bottomなどで表現する
- 表示する三角形の位置によってtransparentを使って邪魔な部分を透明にする
CSSで作る三角形サンプルコード
お待たせいたしました。
それでは実際にCSSで作った三角形を見てみましょう！
せっかくなので、「左上、右上、右下、左上」全バージョンご用意いたしました笑
See the Pen
mdyMwPR by 石森裕也 (@yuyaphotograph)
on CodePen.
■CSSで作る三角形「左上、右上、右下、左上」全バージョン早見表
- 三角形左上：border-left: ◯px solid 三角形の色;
border-bottom: ◯px solid transparent; - 三角形右上：border-top: ◯px solid 三角形の色;
border-left: ◯px solid transparent; - 三角形右下：border-right: ◯px solid transparent;
border-bottom: ◯px solid 三角形の色; - 三角形左下：border-left: ◯px solid 三角形の色;
border-bottom: ◯px solid transparent;
上記サンプルコードはコピペで使用していただいて構わないので少しでも助けになれば幸いです！
まとめ
以上、CSSで三角形を作る方法をご紹介しました。
「意外と簡単だな」と思われたのではないでしょうか？(^o^)
カードデザインをちょっぴりおしゃれにしたい場合なんかに使えるのでぜひチャレンジしてみていただけると幸いです。
最後までご高覧いただきありがとうございました！
