スタイルシートで矢印を描く。

例えばこんな矢印を書いてみたい。スタイルシートだけで何とかしてみましょ。以下のような感じ。

/* 【CSS】右向き矢印 */
.cssArrow_r{
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2em 0 0.5em;
    border-bottom: 2px solid #000;
    line-height: 1em;
}

.cssArrow_r::after{
    position: absolute;
    right: 0;
    bottom: -2px;
    border-right: 1.5em solid #fff;
    border-bottom: 0.7em solid #000;
    content: "";
}

で、

右向きに矢印

としてやると、

右向きに矢印

…という表示になります。

クラス名 "cssArrow_r" で囲んだ文字列の下に水平線を引き、::after 擬似要素で矢の先端部分を描く…という具合です。

どのプロパティが何を表しているか判りにくいので、CSS変数( CSS Variables) を使って記述しなおしてみると…

CSS Variables を利用した以下の記述、IE など古めのブラウザでは意図したとおりに表示されないのでご注意ください。Chrome、Firefox、Edge の最新版なら大丈夫な筈。

/* 【CSS】右向き矢印 CSS Variables 使用版 */
.cssArrow_rv{
/* スコープ 'cssArrow_rw' 内で使う変数を設定 */
    --bgColor : #fff;    /* ページの背景色 */
    --color : #000;    /* 矢印の色 */
    --width : 1.5em;    /* 先っちょの長さ */
    --height : 0.7em;    /* 先っちょの高さ */
    --padding : 0.5em;    /* 先っちょまでの余白 */
    --borderWidth : 2px;    /* 線の太さ */
}
.cssArrow_rv{
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0 calc( var(--width) + var(--padding) ) 0 var(--padding);
    border-bottom: var(--borderWidth) solid var(--color);
    line-height: 1em;
}
.cssArrow_rv::after{
    position: absolute;
    right: 0;
    bottom: calc( 0px - var(--borderWidth) );
    border-right: var(--width) solid var(--bgColor);
    border-bottom: var(--height) solid var(--color);
    content: "";
}

余計に判りにくいですかｗ
【参考】

同様のやり方で、

左向きの矢印

両側矢印

も描けます。ちょっとだけ整理したスタイルシートは以下のような感じ。

/* 【CSS】 */
.cssArrow_l , /* 左向き */
.cssArrow_r , /* 右向き */
.cssArrow_lr /* 両方 */
{
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #000;
    line-height: 1em;
}

.cssArrow_l{
    padding-left: 2em;
    padding-right: 0.5em;
}

.cssArrow_r{
    padding-left: 0.5em;
    padding-right: 2em;
}

.cssArrow_lr{
    padding-left: 2em;
    padding-right: 2em;
}

/* 矢印の先端 */
.cssArrow_l::before,
.cssArrow_lr::before{
    position: absolute;
    left: 0;
    bottom: -2px;
    border-left: 1.5em solid #fff;
    border-bottom: 0.7em solid #000;
    content: "";
}
.cssArrow_r::after,
.cssArrow_lr::after{
    position: absolute;
    right: 0;
    bottom: -2px;
    border-right: 1.5em solid #fff;
    border-bottom: 0.7em solid #000;
    content: "";
}

左向きの矢印 
右向きの矢印 
両方を指す

左向きの矢印
右向きの矢印
両方を指す

ということで。

freefielder.jp

スタイルシートで矢印を描く。

カテゴリ:

タグ:

コメント