un-Techun-Techun-TechCSSCSSのborderプロパティで三角形...2015.08.21CSSのborderプロパティで三角形を作るCSSツイートどうもnissyです。普段CSSコーディングをしていて、borderプロパティを使う機会が多いと思います。コンテンツの外枠であったり、段落間の境界線であったり。今回はborderの仕組みを理解して、線や枠でなく、三角形を作りたいと思います。#ee4f16;}結果ポイント■ポイント1widthとheightの値を0に指定。上下左右それぞれのボーダーの太さ(border-width)によって、三角形の大きさが決まります。(※三角形の大きさについては後述します。)■ポイント2上下左右それぞれのボーダーの色。上記サンプルコードでは、[上][下][右]のボーダーの色を透明にしています。仕組みwidthとheightの値を0に指定し、上下左右それぞれのボーダーの色を付けてみました。上下左右それぞれのボーダーの重なる部分が斜めの境界線を基に分割されています。この仕様によって三角形を実現させることができます。上記の結果の状態から手順を追って実際に三角形を作っていきます。左以外のボーダーの色をひとつずつ透明にします。上ボーダーの色を透明にします。続いて、右ボーダーの色を透明にします。#ee4f16;}結果さらに、下ボーダーの色を透明にします。三角形が完成しました。三角形の大きさや形状は上下左右のボーダーの太さで決まります。三角形の高さ:[下]ボーダーの太さ下の場合だと、高さが30px、幅が60pxの三角形となります。三角形の作り方を理解したところで、これを利用してリストマーカーを作ってみます。擬似要素で三角形を作ります。擬似要素を使用します。擬似要素も使用し矢印型のリストマーカーを作ります。#f8f8f8;}結果ダミーテキストダミーテキストまず同じ形の三角形を2つ作ります。片方の三角形の色を背景の色に合わせます。この三角形をもう片方の三角形と比べて、少し位置をずらし、前面に配置することで、矢印の形を実現しています。1;”により、前面に配置しました。まとめ応用で紹介したような三角形のリストマーカーは実践でも使えそうですね。CSSで実装することのメリットは、サイズや色の変更が容易になることです。CSSプロパティの仕様を深く理解することで、より柔軟性をもたせたコーディングができるかと思います。記述方法とオプション機能CSSでアニメーションを実装してみよう!ハンバーガーメニュー(三本線)編おすすめブレークポイントをもう一歩理解。Memberhayashihayakawahosakamokichikokushink_watanabemiyakoshiioreeennissyotsukasugitoshifumi.imanishiuchidauchiyamamosyamanakafumingzukkiエンターキーを押すと。