タグをCSSで描く

カテゴリーで分類するアレです。
はじめに図解します。

元となる<a>要素

display: inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。

• inline-blockの要素は流れこむ
  inline-block inline-block inline-block inline-block inline-block

• blockの要素は改行される
  block block block block block

位置を調整していきます。

1. position: relativeを設定します、これによりtop、leftなどが効くようにしておきます。
   僅かに空いた隙間は、改行やインデントなどの連続した空白文字が、半角スペース１文字分に変換されて出来たものです。
   inline-block inline-block inline-block inline-block inline-block

2. left: 5pxで本来の位置より右に5px表示をずらします、左側に幅10pxのタグの菱型部分がくっつくので合計で左右5pxずつ本来の幅より大きくなります。
   inline-block inline-block inline-block inline-block inline-block

3. margin-rightに8pxで隣り合うタグが重ならないようにします。
   13pxにしないと計算が合わないような気がしますが、半角スペース分の隙間が初めからあるのでその分を考慮すると大体8pxになるということにしておきます。
   なんとも頼りない計算ですが、そのためだけにスクリプトを走らせて改行・スペース・タブを除去するのも反映までのラグがあるのが嫌なので我慢します。
   inline-block inline-block inline-block inline-block inline-block

その他もろもろ設定するとだいたいこんな感じになります。
後でホバー時の変化を付ける為にtransition: 200ms background-colorも設定しておきます。

inline-block inline-block inline-block inline-block inline-block

a {
    position: relative;
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: #ccd;
    margin: 0.1em 8px 0.1em 0;
    padding: 0 4px;
    border-radius: 0px 2px 2px 0px;
    left: 5px;
    white-space: nowrap;
    transition: 200ms background-color;
}

左側の菱型の部分

この部分はborderを使って斜めの線を表現します。

上下左右で違う色を設定するとそれぞれの堺が斜めになるのを利用しています。
display: blockの幅・高さを0に設定するとこんな感じになります。

.diagonal {
    display: block;
    width: 0;
    height: 0;
    border-top   : 50px solid crimson;
    border-right : 50px solid darkblue;
    border-bottom: 50px solid darkcyan;
    border-left  : 50px solid khaki;
}

これを応用してタグの左側を作ります。

border-rightを#ccdに変えます。

border-topとborder-bottomの色を透明色transparentにします。

border-leftの幅を0pxにします。

出来ました。
これを小さくしてタグに応用します。

新しく要素を用意するのではなく、<a>の::before要素にスタイルを適用します。
position: absoluteを設定することで、元の<a>タグの位置に影響を与えないようになります。

::before、::after要素はcontentを設定しないと有効にならないので注意。*1

• top: 0、left: 0の状態、分かりやすく色を赤くしています。
  inline-block inline-block inline-block inline-block inline-block

• leftに-10pxを指定して<a>要素の左に持ってくる。
  inline-block inline-block inline-block inline-block inline-block

まとめるとこんな感じになります。
これも後でホバー時の変化を付ける為にtransition: 200ms border-right-colorを設定しておきます、background-colorではないので注意。

a::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: -10px;
    border-top   : solid 10px transparent;
    border-right : solid 10px #ccd;
    border-bottom: solid 10px transparent;
    border-left  : 0px;
    transition: 200ms border-right-color;
}

タグの穴の部分

::after要素を使います、これも同じようにposition: absoluteで<a>要素に影響を与えずに配置出来ます。

• 4pxの正方形を作る、<a>の高さ20pxから4pxを引いて2で割ると8px。
  top: 8pxで真ん中に配置する。
  隠れないようにz-indexも高めに設定しておく。
  inline-block inline-block inline-block inline-block inline-block

• border-radius: 50%を設定して円を作る。
  位置を調整する、下はleft: -4.8pxに設定したところ。
  inline-block inline-block inline-block inline-block inline-block

まとめるとこんな感じになります。

a::after {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  margin: 0;
  padding: 0;
  top: 8px;
  left: -4.8px;
  border-radius: 50%;
  background: white;
  z-index: 100;
}

ホバー時の変化を付ける

擬似クラス:hoverを使います。
本体の<a>要素にホバーした時に::before、::afterにも変化を適用するにはa:hover::beforeのようにすれば大丈夫です。
クラスセレクタの時も.tag:hover::beforeで適用されます。

inline-block inline-block inline-block inline-block inline-block

a:hover {
  background: #88a;
}

a:hover::before {
  border-right-color: #88a;
}

IE11で見たら幾つかのタグは<a>要素と左の三角の間に切れ目が見えちゃったけど、何かいい方法あるのかな？
とりあえず今は放置してます。