画像を一切使わずに,HTMLとCSSだけで三角形を描く方法をご紹介. まずは結論,どうやって描くかを紹介し,その仕組みを説明. 最後になぜこの記録を書いたか,そのキッカケも紹介する. それでは"CSS三角形"をサクッと描いて行こう.
どうやって描く?
次のスタイルで"CSS三角形"を描くことが出来る.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheereA6LvzToVDItcEigOpi5BnnmGq155nyg3bY7-TiAspoD-pbabr-WSs-JKLSEYeabWE-vlpRNsz0YOau4tigpK7JXkzOmpca730PmMs_D8fUImgWXhldyBkr3BqAzZiA-q2spmXjw/s1600/Triangle.png)
Baseが"三角形の底辺の長さ",Heightが"三角形の高さ"である. CSSには底辺の長さの半分の値をborder-widthに指定する. 半分の値というところがミソである(詳しくは後述). これ,三角形の向きが例えば右向きであっても,先と同じ箇所が底辺,高さとなる点に注意. 次のように.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9o8BcEEyBSISRrtQkDbw4yUJtWIxoK1jgrkwJWKIkS_n0-j05aGTYCkrrICu8pCDHdQwu19WGly5NCGGz_Etlf9B-yRJLZGpgaQu3NVY6iUEKb0K52nZU8lzFS95l4spCX4DOGL7TlQ/s1600/Triangle+Rotated.png)
ちなみに,右向きの三角形をつくるには次のCSSを用いる.
borderを操ることで,画像を一切用いること無く三角形を描くことが出来る. では,なぜborderだけで三角形になるのか. 次の章へ進んでみよう.
.triangle {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 三角形の底辺の長さの半分;
border-bottom: solid 三角形の高さ 三角形の色;
border-top-width: 0;
}
これで上向き三角形▲が出来上がる. "三角形の底辺の長さ"と"三角形の高さ"については下の図を見て欲しい.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheereA6LvzToVDItcEigOpi5BnnmGq155nyg3bY7-TiAspoD-pbabr-WSs-JKLSEYeabWE-vlpRNsz0YOau4tigpK7JXkzOmpca730PmMs_D8fUImgWXhldyBkr3BqAzZiA-q2spmXjw/s1600/Triangle.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9o8BcEEyBSISRrtQkDbw4yUJtWIxoK1jgrkwJWKIkS_n0-j05aGTYCkrrICu8pCDHdQwu19WGly5NCGGz_Etlf9B-yRJLZGpgaQu3NVY6iUEKb0K52nZU8lzFS95l4spCX4DOGL7TlQ/s1600/Triangle+Rotated.png)
.triangle-right {
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 三角形の底辺の長さ割る2;
border-right: solid 三角形の高さ 三角形の色;
border-left-width: 0;
}
上向きの時bottomとtopであったスタイルをrightとleftにするだけ. 三角形の底辺方向(top,bottom,right,left)に"solid 三角形の高さ 三角形の色"を,頂点方向のborder-widthを0にセットする,と覚えよう. この法則に従うことで,4方向の三角形を自在につくることが出来る.
See the Pen CSS Triangle by Hideyuki Tabata (@seeker5084) on CodePen.
なぜそうなる?
"CSS三角形"を理解するための第一歩はブロック要素の形を見ることである.
borderのあるブロック要素
borderをもう少し厚くして,borderの上下左右を色分けしてみると次のようになる.
border-left-colorなどで色分けしてみたborder
各borderの端を見ると角度が付いていることが分かる. この角度がポイントで,実は三角形の斜辺になる. この要素のwidthとheightを0にしてみる.
要素のwidthとheightを0にした所
ご覧のように4つの三角形がくっついたようになる. 後は必要なborder(例えばbottom)だけに色をつけて,残り全ての色は透明にすると次のようになる.
border-bottom以外の色(要素背景とborderの色)を透明にする
要素自体の大きさは先程と同じで,今見える三角形▲の高さの2倍ある. これでは気持ちが悪いので不要なborderの幅(この場合border-top-width)を0にする. こうすることで要素自体の大きさがborder-bottomの大きさ,すなわち三角形の高さと同じになる.
border-topを0にすれば要素の高さが三角形の高さになる
これが"CSS三角形"のトリックである.
きっかけ
Amazon.co.jpでウィンドウショッピングを楽しんでいた時の話し. ふと"ベストセラー1位"のリボンが気になった.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGW_gqGuHjF5MqHfOMnw-rEUKQREMW9_DRu2gGJEprYseoPg_5uz0Zo00qgLr35ibLNLvxqb8CuCWDKakAXP4V1brqKZ1M5dFeAfhZQiP_FoFQWAG27SCAWChxubjzVIV1m_IhbvonA/s800/01.png)
私はWebサーフィンをしていると,どのようにHTMLが書かれているのか気になってしまい,ついインスペクタを開いてしまう癖がある. このリボンの切れ端(魚の尻尾のような形)がどのように描かれているのか気になってしまったのだ. 画像を使っているのかと思い,拡大してみた.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8SW94D8oV7AQOBoMeFF4qoxBf0tsfF3t59IsxJ4CZ_8CEu3lkIudxob1HMu-M81aFgP47YotlUdCFcfUswZH82_bPXpEZ0-aM2b6YqW02nukimgrFevRZSS_mznhyphenhyphenPYwcvMMdx-nmw/s800/02.png)
星マークは画像を使っているらしく,拡大に伴って画質が落ちたが,気になるリボンはくっきり綺麗なまま. ベクター画像を使っているのかとも思ったが,それならば星にもベクター画像を使うはずだ. Webインスペクタを開いてリボン全体の要素を検証した.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-5_TkabLUdBTaEXSqmroBVwXmreDCF3XgRKgyuqAAHS0C8bvhyfKqGOEfZJvVyExIRa9gVtTSBzbWr0rdtexLvVLlAWFetJx0c_3RsNBN6mzI8oFBDl8RinOOhMbHeytOwy_XMdZpA/s800/03.png)
"ベストセラー1位"という部分の正体はiタグだった. そのタグの中には:beforeと:after2つの疑似要素(Pseudo-elements)がある. どうやらこの疑似要素がリボンの切れ端を描いているようだ.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsX0tpfGSWre8EScspvmK9B7GywPYMcZu3lJvFzzFoE4FLl6SaBNNkVvxV1W64NsC8L2zWsSQ0iE2MlOxKgwcnWw-ruLdaxskOFRdG411cqGEgleuUYWz_-OskEKMon6GaHyTW-7c_dA/s800/04.png)
iタグの背景色を変更してみたところが上の画像. 2つの三角形をiタグに重ねることでリボンの切れ端を表現していた! 素晴らしい… そしてこの2つの三角形は2つの疑似要素で描かれているようだった.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoqTpvDfLR1eSRiKX_TW5MRmzqWbz2NsfzLRR-la0HmOEIBzEMT6QaFjoOlpud6Lpq0WiZ34i93hbfWZRJ9MCXdZRobvN63xQ-vHL6XHmYGCFSUdLzQYv9qPyRWjwwsK5DUnQCH8JYA/s800/05.png)
:beforeが下の三角形(▲),:afterが上の三角形(▼)だった.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpfhf5tJlNYcQSO0OnLAviaC6oItcWgZCAOQleOXnOYgAA4eDlzOBCB3iOi3TIABD5MHS_45Mh6PZalKZPtahoYXDTtZRT9pgs_RM3y2W5n3Q1u-HP1FH26M3XVZv2PK-pM2UzZtLGQ/s800/06.png)
:afterのスタイルを見てみると,border-topやborder-bottom-widthなどと,borderをいじっていることが判明. これがきっかけとなり,調べてゆくとborderの操作だけで三角形が描けることが判った. ピュアなCSSで描かれているので画像のようにリソースをダウンロードする手間も無く,画質の劣化も無い. ただし,塗りつぶしの三角形しか描けない点が惜しい. つまり,アウトライン化出来ないということ. ちなみに,Amazon.co.jpではリボンの切れ端以外でもこの"CSS三角形"を利用していたので,ぜひ見つけてみて欲しい.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGW_gqGuHjF5MqHfOMnw-rEUKQREMW9_DRu2gGJEprYseoPg_5uz0Zo00qgLr35ibLNLvxqb8CuCWDKakAXP4V1brqKZ1M5dFeAfhZQiP_FoFQWAG27SCAWChxubjzVIV1m_IhbvonA/s800/01.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz8SW94D8oV7AQOBoMeFF4qoxBf0tsfF3t59IsxJ4CZ_8CEu3lkIudxob1HMu-M81aFgP47YotlUdCFcfUswZH82_bPXpEZ0-aM2b6YqW02nukimgrFevRZSS_mznhyphenhyphenPYwcvMMdx-nmw/s800/02.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-5_TkabLUdBTaEXSqmroBVwXmreDCF3XgRKgyuqAAHS0C8bvhyfKqGOEfZJvVyExIRa9gVtTSBzbWr0rdtexLvVLlAWFetJx0c_3RsNBN6mzI8oFBDl8RinOOhMbHeytOwy_XMdZpA/s800/03.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsX0tpfGSWre8EScspvmK9B7GywPYMcZu3lJvFzzFoE4FLl6SaBNNkVvxV1W64NsC8L2zWsSQ0iE2MlOxKgwcnWw-ruLdaxskOFRdG411cqGEgleuUYWz_-OskEKMon6GaHyTW-7c_dA/s800/04.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoqTpvDfLR1eSRiKX_TW5MRmzqWbz2NsfzLRR-la0HmOEIBzEMT6QaFjoOlpud6Lpq0WiZ34i93hbfWZRJ9MCXdZRobvN63xQ-vHL6XHmYGCFSUdLzQYv9qPyRWjwwsK5DUnQCH8JYA/s800/05.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpfhf5tJlNYcQSO0OnLAviaC6oItcWgZCAOQleOXnOYgAA4eDlzOBCB3iOi3TIABD5MHS_45Mh6PZalKZPtahoYXDTtZRT9pgs_RM3y2W5n3Q1u-HP1FH26M3XVZv2PK-pM2UzZtLGQ/s800/06.png)
![](http://img2.blogblog.com/img/icon18_edit_allbkg.gif)
5820426725118193839
https://www.storange.jp/2017/05/css.html
https://www.storange.jp/2017/05/css.html
CSSだけで三角形を描く
2017-05-20T11:18:00+09:00
https://www.storange.jp/2017/05/css.html
Hideyuki Tabata
Hideyuki Tabata
200
200
72
72
![](https://lh6.googleusercontent.com/-aatwVu6vLek/UK-rk-jfWzI/AAAAAAAAB4k/6gO6IQURbGY/s200-c/seeker5084-R_iOSicon.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheereA6LvzToVDItcEigOpi5BnnmGq155nyg3bY7-TiAspoD-pbabr-WSs-JKLSEYeabWE-vlpRNsz0YOau4tigpK7JXkzOmpca730PmMs_D8fUImgWXhldyBkr3BqAzZiA-q2spmXjw/s72-c/Triangle.png)