CSSを使って矢印の枠線を作る

デザイン作成中に「そういえばこれもできるかな」と思いついて試しに作ったサンプルです。

画像は使わずCSSだけなので、色やサイズの変更もCSSが読めれば簡単です。

実現したいこと

実現したいことは以下の通り。

• CSSだけで矢印を使った枠線を作る

言葉では完成図が分かりづらいのでサンプルを見ていただいた方が早いと思います。

サンプル

以降のサンプルは、クラス名だけ変えてHTML構造は同じのため、先にHTMLを記載します。

なお、今回はbox-shadowを使用した要素や、背景にパータンやグラデーションがある場合には対応していません。単色背景の場合にのみ適用可能です。

<!-- 以下の「line-arrow-1」を「line-arrow-2」などに書き換える -->
<div class="line-arrow-1">CSSだけで矢印の枠線を作る方法。この枠線は画像は使わず、CSSだけで作成しているサンプルです。</div>

それでは以下がサンプルです。

矢印の枠線1

.line-arrow-1 {
  position: relative;
  padding: .5em;
  border: 10px solid #52ccb5;
  border-radius: 10px;
}
.line-arrow-1::after {
  position: absolute;
  bottom: -17px;
  left: 10px;
  display: block;
  width: 0;
  height: 0;
  content: '';
  border-width: 12px 15px 12px 10px;
  border-style: solid;
  border-color: #fff; /* 背景色に合わせて変更 */
  border-right-color: #52ccb5;
}

矢印の枠線2: 先端を上下に配置

上下に矢印を付けたバージョン。

.line-arrow-2 {
  position: relative;
  padding: .5em;
  border: 10px solid #52ccb5;
  border-radius: 10px;
}
.line-arrow-2::before, .line-arrow-2::after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
  border-color: #fff; /* 背景色に合わせて変更 */
}
.line-arrow-2::before {
  top: -17px;
  right: 10px;
  border-width: 12px 10px 12px 15px;
  border-left-color: #52ccb5;
}
.line-arrow-2::after {
  bottom: -17px;
  left: 10px;
  border-width: 12px 15px 12px 10px;
  border-right-color: #52ccb5;
}

結び

特に大したことはしていませんが、見映えはそれなりにできます。

線幅の変更で先端の位置調整が必要になりますので、その部分は必要に応じて変更ということで。

Twitter

Hatena

Facebook

Pocket