【2017年版】CSSのみで三角形を作る方法を解説するよ|ついでに台形や扇形も作ってみるよタイトル通り、CSSのみで三角形を作る方法を紹介します。「三角形なんて作ってどーすんの?」って思う人もいるかもしれませんが、吹き出しやコーナーリボンなどの装飾を作る際には欠かせないテクニックです。縦長(横長)三角形の作り方”>”の作り方borderを使った三角形CSSで三角形を作るとき、最もよく使われる手法です。サンプルを作ってみましょう。solid;}はい、三角形が出来ました。横幅と高さが0のブロック要素に透過(transparent)したborderを指定し、後からborder-bottomに色を与えると上向き三角形の出来上がりです。いう仕組みになっているのか、それぞれのborderの挙動を画像で解説します。//黄}こうすると分かりやすいですね。borderを使った三角形は、次に紹介するlinear-gradientを使う方法よりも理解しやすいです。linear-gradientを使った三角形borderを使わない方法もあります。no-repeat;}はい、三角形です。この方法は少し分かりにくいですが、横幅と高さをwidthheightで直感的に指定できるというメリットがあります。これは2種類のグラデーションを組み合わせて三角形を作るという手法なんですが、説明がややこしいので色分けして作ったCodepenのリンクを貼っておきます。適当に数字をいじって動作を確認すれば理解できるかと。CodePen.台形の作り方widthの値をいじれば台形が作れます。solid;}使い道はなさそう。扇型の作り方border-radiusを使えば扇型が作れます。solid;}これも使い道は...なさそう。各borderの横幅を調整すれば、縦長や横長の三角形が作れます。solid;}こんな感じで、応用すれば色々な形がCSSのみで実現可能です。”>”の作り方これは三角形ではない?ですが、borderの挙動の理解を深める事ができるので、一応紹介しときます。solid;}後はtransform:rotate(45deg);で傾ければ「>」が完成するんですが、この各borderの結合部分の挙動を見て「ん?」ってなる人もいるんじゃないでしょうか。言葉だと説明しづらいので画像で解説。こんな感じで指定しなかったborderとの結合部分は斜線になりません。(よく考えたら当たり前か...)以上、CSSのみで三角形を作る方法でした。使いこなせれば、サイト上の様々なパーツを画像からPureCSSに置き換えることが出来る(かもしれない)ので、ファイル容量の削減やメンテナンス性の向上に繋がります。【CSS】ボックス幅の計算が簡単になる「box-sizing」の使い方Author名前:Leo26歳にしてようやくフリーターから脱却してWeb屋さんになった人。ライターみたいな事もするよ。あと雪国に住んでるけどバイクが好き。特技は後先考えずに突撃して自滅することです。