SIMCSSのclip-pathを使って三角形を書く方法をご紹介します。
目次
上向き三角形｜▲
表示とHTML・CSSの見本としてCodePenを載せておきます。
See the Pen triangle｜top by s sim (@s-sim) on CodePen.
三角形のHTML
HTMLは非常にシンプルで、三角形用のdivタグを１つ用意するだけです。
上・下・右・左向きの三角形すべてで共通です。
<body>
<main>
<!-- 三角形用のタグ -->
<div class="triangle_top"></div>
</main>
</body>三角形のCSS
.triangle_top{
background-color: #00BCD4;
width: 34px;
height: 30px;
clip-path: polygon(0 100%, 50% 0, 100% 100%);
}三角形のCSSも非常にシンプルで、書くプロパティの役割を下記に整理しておきます。
三角形のCSSプロパティ
- background-color：三角形の色
- width：三角形の横幅
- height：三角形の高さ
- clip-path：三角形の向き
下向き三角形｜▼
See the Pen Untitled by s sim (@s-sim) on CodePen.
同じ要領で下向きの三角形も作れます。
HTMLは共通ですので、変更箇所は’clip-path’のみです。
clip-path: polygon(0 0,100% 0, 50% 100%);なお、三角形の横幅や高さを変更したい場合には、widthとheightも変更してください。
右向き三角形｜▶
See the Pen riangle｜right by s sim (@s-sim) on CodePen.
同様にHTMLは共通ですので、変更箇所は下記CSS３点です。
- width：上（下）向きのwidthとheightを入れ替えると同じような形状になります。
- height：上（下）向きのheightとwidthを入れ替えると同じような形状になります。
- clip-path：三角形の向きを右向きに変更
.triangle_right{
background-color: #00BCD4;
width: 30px;
height: 34px;
clip-path: polygon(0 0, 0 100%, 100% 50%);
}左向き三角形｜◀
See the Pen riangle｜left by s sim (@s-sim) on CodePen.
左向き三角は、右向き三角の’clip-path’を変更するだけ作れます。
clip-path: polygon(100% 0, 0 50%, 100% 100%);
