【CSS】borderを使った小ネタ

borderは要素に枠を作るcssになります。
四方それぞれ太さや色、形などを指定できるので結構自由に枠線を作ることが可能です。
それを利用して、簡単な記号を画像を使わずにcssだけで表示させる事ができます。

三角を作る

borderで三角形を作る方法は結構メジャーでございます。

  <div style="
    width:0;
    height:0;
    border:50px solid #000;
    border-color:#000 #fff #fff #fff
  "></div>

borderの線は、幅太くなると各ポジションとの兼ね合いで斜めに切り込みが入ります。

ボーダーの線はこの様に組み合わされています

widthとheightを０にして隙間を消すことによって、ボーダーだけの正方形を作ることが可能になりますので、あとは必要な場所以外を背景色と同じ色に変更すると三角の画像が作成されるようになります。
調整次第では、正三角形なども作成できますので、余裕があったら色々とやってみると良いかもしれませんね。

矢印を作る

矢印を作ると言っても、＜や＞のような不等号の矢印になります。
これは大体予想がつくと思いますが、４辺のうち２辺だけボーダーを表示させ、transformで45度角度をつけたら矢印の出来上がりになります。

  <div style="
    width:30px;
    height:30px;
    border-top:2px solid #000;
    border-left:2px solid #000;
    transform:rotate(45deg);
  "></div>

ボタンにちょっとしたアイコンを付ける用途などに、上記の三角形や矢印の指定方法が役に立ちます。
beforeやafter等の疑似要素と組み合わせ使うのが便利だと思います。

【おまけ】円を作る

  <div style="
    width:30px;
    height:30px;
    background:#000;
    border-radius: 50%;
  "></div>

おまけとして、borderではなくborder-radiusで円を作る方法も記載しておきます。
border-radiusは要素の角を丸くするのですが、これを50%に指定すると、要素が円形になります。
正方形に対して行うと正円、長方形に対して行うと楕円になります。
これも、いろいろな場所で使いますので、覚えておいて損はないと思います。

この様に、CSSだけでも簡単な記号でしたら作ることが可能になっていますので、そういう部分を踏まえながらWEBデザインを作っていくと良いと思います。