色変更可能な三角形のアイコンをCSSだけで作る方法

CSS便利だよねということで、いままでは画像やアイコンフォントで作っていたものをCSSのみで作ってみます。

実用を考えて、対象はボタンの左側によくついている右向き三角形のアイコンです。

実現したいこと

実現したいことは以下のとおり。

• CSSで三角形のアイコンをつける
• 画像やSVGは使わない
• 三角形の色は変更できるようにする
• 疑似要素で実装する

SVGはHTML側での記述が必須になりますから、CSSだけでという趣旨からは外れると思うので今回は除外です。

考え方

CSSで色を変更できる作り方としては、概ね以下の2つの方法が考えられます。

• 三角形が含まれるアイコンフォントを使う
• 特殊文字(▶︎)を使う

しかし今回は第三の方法を使います。

• 疑似要素にborderを設定して三角形を作る

手法は単純で、CSSで吹き出しを作る時に使っている方法をそのまま使うだけです。

コード

以下はサンプルコードです。

実際にCSSを当てたサンプルを設置していますが、使用しているCSSプロパティに対応していれば表示されるはずです。

なお、ボタン自体の幅やpaddingの設定などは省いています。

スマホサイズの画面では、横に並べたボタンの個数とラベル文字数の問題で、ラベルが折り返していると思いますのでその点もご了承ください。

色変更可能な三角形アイコン

 <span class="btn btn-line-red icon-triangle">RED</span>
 <span class="btn btn-line-blue icon-triangle">BLUE</span>
 <span class="btn btn-line-orange icon-triangle">ORANGE</span>

/* 三角形アイコン用の指定 */
.icon-triangle{
  position: relative;
  padding-left: 20px;
}
.icon-triangle::before{
  content: "";
  position: absolute;
  top: 50%; left:10px;
  display: block;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent;
}
/* 色指定 */
.btn-line-red{
  color:#d70035;
  border:2px solid #d70035;
}
.btn-line-red.icon-triangle::before{
  border-left-color: #d70035;
}
.btn-line-blue{
  color:#0075c2;
  border:2px solid #0075c2;
}
.btn-line-blue.icon-triangle::before{
  border-left-color: #0075c2;
}
.btn-line-orange{
  color:#f3981d;
  border:2px solid #f3981d;
}
.btn-line-orange.icon-triangle::before{
  border-left-color: #f3981d;
}

色指定の場所で、border-left-colorを各色に設定する事で色変更が可能です。

三角形の長さを変える

三角形の形を変えるには、以下のように設定を変更する必要があります。

.icon-triangle::before{
  /* 下記の10pxが左のborderの幅なので、ここを変更すると先端の長さが変わる */
  border-width: 8px 0 8px 10px;
}

色変更可能な三角形アイコンに円を追加

 <span class="btn btn-line-red icon-triangle icon-circle">RED</span>
 <span class="btn btn-line-blue icon-triangle icon-circle">BLUE</span>
 <span class="btn btn-line-orange icon-triangle icon-circle">ORANGE</span>

/* 三角形アイコン用の指定 */
.icon-triangle{
  position: relative;
  padding-left: 20px;
}
.icon-triangle::before{
  content: "";
  position: absolute;
  top: 50%; left:10px;
  display: block;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent;
}
/* 円アイコン用の指定 */
.icon-circle::after {
  position: absolute;
  top: 50%;
  left: 3px;
  display: block;
  box-sizing: border-box;
  width: 0;
  width: 20px;
  height: 0;
  height: 20px;
  margin-top: -10px;
  content: '';
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
}
/* 色指定 */
.btn-line-red{
  color:#d70035;
  border:2px solid #d70035;
}
.btn-line-red.icon-triangle::before{
  border-left-color: #d70035;
}
.btn-line-red.icon-circle::after{
  border-color: #d70035;
}
.btn-line-blue{
  color:#0075c2;
  border:2px solid #0075c2;
}
.btn-line-blue.icon-triangle::before{
  border-left-color: #0075c2;
}
.btn-line-blue.icon-circle::after{
  border-color: #0075c2;
}
.btn-line-orange{
  color:#f3981d;
  border:2px solid #f3981d;
}
.btn-line-orange.icon-triangle::before{
  border-left-color: #f3981d;
}
.btn-line-orange.icon-circle::after{
  border-color: #f3981d;
}

上記の.icon-circleが円の指定です。

追加箇所を分かりやすくするためにクラスをわけていますが、三角アイコンと円を両方使うなら1つのクラスにbeforeとafterを設定した方がよいでしょう。

あまり細かく分けると邪魔になりますから。

白の三角アイコン

 <span class="btn btn-red icon-triangle">RED</span>
 <span class="btn btn-blue icon-triangle">BLUE</span>
 <span class="btn btn-orange icon-triangle">ORANGE</span>

/* 三角形アイコン用の指定 */
.icon-triangle{
  position: relative;
  padding-left: 20px;
}
.icon-triangle::before{
  content: "";
  position: absolute;
  top: 50%; left:10px;
  display: block;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent;
}
/* 色指定 */
.btn-red{
  background-color: #d70035;
}
.btn-red.icon-triangle::before{
  border-left-color: #fff;
}
.btn-blue{
  background-color: #0075c2;
}
.btn-blue.icon-triangle::before{
  border-left-color: #fff;
}
.btn-orange{
  background-color: #f3981d;
}
.btn-orange.icon-triangle::before{
  border-left-color: #fff;
}

一応前項の書き方にあわせていますが、三角アイコンの色が白一色なので無駄のある記述になります。

三角形には白以外使わないという場合は、次項のような書き方がよいかもしれません。

白の三角アイコンに円

 <span class="btn btn-red icon-triangle icon-circle">RED</span>
 <span class="btn btn-blue icon-triangle icon-circle">BLUE</span>
 <span class="btn btn-orange icon-triangle icon-circle">ORANGE</span>

/* 三角形アイコン用の指定 */
.icon-triangle{
  position: relative;
  padding-left: 20px;
}
.icon-triangle::before{
  content: "";
  position: absolute;
  top: 50%; left:10px;
  display: block;
  width: 0px;
  height: 0px;
  margin-top: -8px;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #fff;
}
/* 円の指定 */
.icon-circle::after{
  content: "";
  position: absolute;
  top: 50%;
  left:3px;
  display: block;
  width: 0px;
  height: 0px;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 50%;
}
/* 色指定 */
.btn-red{
  background-color: #d70035;
}
.btn-blue{
  background-color: #0075c2;
}
.btn-orange{
  background-color: #f3981d;
}

三角形の円の色も、基本となる疑似要素自体の指定部分で設定しているため、少し無駄が省けたかと思います。

問題点

text-shadowでラベルの陰を付ける場合、今回の方法では三角形に陰がつけられません。

box-shadowを使うと、疑似要素自体の形である四角にそって陰がついてしまいます。

思い浮かぶ解決策は、after疑似要素で同じように三角形をつくり、陰の色を設定し、position:absolute;で位置を調整しつつz-indexで下に配置するぐらいです。

他には、アイコンフォントか特殊文字を使う方法ならtext-shadowが使えるので、簡単に実現可能ではあります。

結び

iPhohe Xが発表され、以下のような情報も出て来ました。

• iPhone X対応におけるデザイン上の注意ポイント

下記の記事とあわせれば、色々なボタンがCSSだけで作れる、かもしれません。

• CSSで使い回しの効く光沢表現を作る方法

iPhone Xは基本的に3倍解像度。@3x系の素材準備が必須となる。ただしこの辺はiPhone Plus以降のトレンドなのでトドメ感

マーカー程度であればSVGもそんなに重くはならないとは思いますが、SVGが使いづらい条件もあるでしょうし、マーカ程度は画像を使わずCSSで作ってしまうのも手かもしれません。

もちろんボタンだけではなくリストマーカーとしても使えますから、適用できる部分は多いのではと思います。