CSSで作る矢印デザインのまとめ

Posted on by

ウェブデザインにおいて、矢印はナビゲーションや強調に欠かせない要素です。
CSSを使うことで、さまざまな形状やスタイルの矢印を簡単に作成できます。
この記事では、代表的な矢印デザインをCSSでどのように実装するかを解説します。

シンプルなCSS矢印

例1: 上向き矢印

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black;
}

例2: 下向き矢印

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid black;
}

チェブロン矢印

例1: 右向きチェブロン

.chevron-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

例2: 左向きチェブロン

.chevron-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

ダブル矢印

例1: 右向きダブル矢印

.double-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
  position: relative;
}
.double-right:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
  position: absolute;
  left: -20px;
}

円形矢印

例1: 右向き円形矢印

.chevron-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

アニメーション矢印

例1: バウンス矢印

.bouncing-arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid black;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

矢印付きボタン

例1: 矢印付きボタン

.button-arrow {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  position: relative;
  border: none;
  cursor: pointer;
}
.button-arrow:after {
  content: '→';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

矢印のアイコンとしての利用

例1: 矢印アイコン

.arrow-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(45deg);
}

三角形を使った右向き矢印

.arrow-right-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid black;
}

三角形を使った左向き矢印

.arrow-left-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid black;
}

三角形を使った上向き矢印

.arrow-up-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid black;
}

三角形を使った下向き矢印

.arrow-down-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid black;
}

シンプルな右向き矢印 (直線)

.arrow-right-simple {
    width: 20px;
    height: 2px;
    background-color: black;
    position: relative;
}
.arrow-right-simple:after {
    content: '';
    position: absolute;
    top: -5px;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
}

シンプルな左向き矢印 (直線)

.arrow-left-simple {
    width: 20px;
    height: 2px;
    background-color: black;
    position: relative;
}
.arrow-left-simple:after {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    transform: rotate(-45deg);
}

シンプルな上向き矢印 (直線)

.arrow-up-simple {
    width: 2px;
    height: 20px;
    background-color: black;
    position: relative;
}
.arrow-up-simple:after {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 10px;
    height: 10px;
    border-left: 2px solid black;
    border-top: 2px solid black;
    transform: rotate(-45deg);
}

シンプルな下向き矢印 (直線)

.arrow-down-simple {
    width: 2px;
    height: 20px;
    background-color: black;
    position: relative;
}
.arrow-down-simple:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 10px;
    height: 10px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(45deg);
}

円形矢印 (上向き)

.circle-arrow-up {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid black;
    position: relative;
}
.circle-arrow-up:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    transform: translate(-50%, -50%);
}

円形矢印 (下向き)

.circle-arrow-down {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid black;
    position: relative;
}
.circle-arrow-down:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid black;
    transform: translate(-50%, -50%);
}

ダッシュ付き右向き矢印

.dashed-arrow-right {
    width: 30px;
    height: 2px;
    border-bottom: 2px dashed black;
    position: relative;
}
.dashed-arrow-right:after {
    content: '';
    position: absolute;
    right: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
}

ダッシュ付き左向き矢印

.dashed-arrow-left {
    width: 30px;
    height: 2px;
    border-bottom: 2px dashed black;
    position: relative;
}
.dashed-arrow-left:after {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    transform: rotate(-45deg);
}

波線付き矢印 (右向き)

.wavy-arrow-right {
    width: 30px;
    height: 2px;
    background-image: linear-gradient(to right, transparent 50%, black 50%);
    background-size: 10px 100%;
    position: relative;
}
.wavy-arrow-right:after {
    content: '';
    position: absolute;
    right: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
}

太い右向き矢印

.thick-arrow-right {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid black;
}

太い左向き矢印

.thick-arrow-left {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 30px solid black;
}

長い右向き矢印

.long-arrow-right {
    width: 50px;
    height: 2px;
    background-color: black;
    position: relative;
}
.long-arrow-right:after {
    content: '';
    position: absolute;
    right: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    transform: rotate(45deg);
}

長い左向き矢印

.long-arrow-left {
    width: 50px;
    height: 2px;
    background-color: black;
    position: relative;
}
.long-arrow-left:after {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    transform: rotate(-45deg);
}

短い上向き矢印

.short-arrow-up {
    width: 2px;
    height: 10px;
    background-color: black;
    position: relative;
}
.short-arrow-up:after {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 10px;
    height: 10px;
    border-left: 2px solid black;
    border-top: 2px solid black;
    transform: rotate(-45deg);
}

短い下向き矢印

.short-arrow-down {
    width: 2px;
    height: 10px;
    background-color: black;
    position: relative;
}
.short-arrow-down:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -4px;
    width: 10px;
    height: 10px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(315deg);
}

まとめ

この記事では、さまざまなCSS矢印デザインを紹介しました。
これらのサンプルをもとに、自分のウェブサイトに合ったカスタム矢印を作成してみてください。