アイコンも画像もいらない!CSSだけで矢印を作る方法

今回はアイコンも画像も使わずにCSSで矢印を作る方法を紹介します。

 

CSSで矢印アイコンを作る方法

まずはCSSで矢印のアイコンを作ってみます。左上から右下へのL字の矢印です。

HTML

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <title>CSS arrow</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
   <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  </head>
  <body>

   <div class="arrow"></div>

  </body>
</html>

 

CSS

.arrow{
  position: relative;
  width: 200px;
  height: 50px;
  border-top: 8px solid #5bc0de;
  border-right: 8px solid #5bc0de;
  box-sizing: border-box;
}

.arrow::after{
  content: "";
  position: absolute;
  bottom: -14px;
  right: -17px;
  border-top: 14px solid #5bc0de;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}

 

できたら保存してブラウザで確認してみましょう。

div.arrowの上と右にborderが指定してあり、右のborderの下に::afterで三角形を作っています。

これらをつなげると左上から右下への矢印のようになります。

 

四角に囲まれた矢印

次はよりアイコンらしい、四角形に囲まれた三角形のアイコンを作ってみます。HTMLは上記と同じです。

CSS

.arrow{
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}

.arrow::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1px solid #ff0000;
  -webkit-border-radius: 25%;
  border-radius: 25%;
}

.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  left: 5px;
  box-sizing: border-box;
  width: 3px;
  height: 3px;
  border: 3px solid transparent;
  border-left: 3px solid #ff0000;
}

 

角丸の四角に囲まれ、右方面を向いた矢印を作ることができます。ちょっとY◯uTubeっぽくなりますね。

このようにCSSで矢印を作る場合はafterやbeforeの擬似要素を使うことが多いです。メインの要素を作り、その擬似要素で三角形を作るという感じです。

 

くの字型の矢印

くの字型の矢印も作ってみましょう。HTMLは相も変わらず上記と同じです。

CSS

.arrow{
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.arrow::before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #5bc0de;
  border-right: solid 2px #5bc0de;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -4px;
}

 

右向きのくの字の矢印が作れます。ウェブサイトでもよく見かけますね。

 

上向きの矢印

上向きの矢印の作り方は以下の通りです。これは擬似要素を使わなくてもできますね。

CSS

.arrow{
  width: 0px;
  border-color: #d9534f;
  border-style: solid;
  border-width: 30px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}

 

よく見る矢印

定番のよく見る一般的な矢印を作ってみましょう。

.arrow {
  display:inline-block;
  height:40px;
  width:80px;
  background-color:#5bc0de;
  position:relative;
  top:40px;
}

.arrow:before {
  position:absolute;
  content:"";
  width:0;
  height:0;
  border:60px solid transparent;
  border-left:60px solid #5bc0de;
  left:80px;
  top:-37px;
}

 

div.arrowで四角形を作り、::beforeで三角形を右にくっつけるとよく見る矢印ができます。

三角形の大きさや位置は調整すると綺麗になるでしょう。

 

まとめ

CSSだけで三角形を作る方法を紹介しました。

アイコンや画像を使いたくない!という場合はCSSだけでも三角形を作ることができます。

CSSだけで三角形を作れるようになるとデザインに幅が出てくるので、ぜひ作れるようにしましょう。