LoginSignup
6

More than 5 years have passed since last update.

画像を使わずに枠線(ボーダー)つきの矢印をcssで表現する

Last updated at Posted at 2017-06-12

cssで矢印を表現するためのコードを紹介してるサイトは結構ありますが、
ボーダーあり矢印→のコードを紹介しているとこが少ないので、べた塗りと枠のみ両方メモしておきます。
arrow_01.JPG


矢印の三角部分が長方形の高さよりはみ出る部分はボーダーが見えて
長方形に繋がる部分はボーダーを隠す必要があるので、
擬似要素にz-index:で重ね順を持たせて、長方形が上、三角形が下になるようにします。
さらに、長方形と三角形が重なる面のborderのカラーを背景色(中の色)にして、
ボーダーの分をずらして重ねて出来上がり。

<べた塗り矢印>
arrow_02.png

<ボーダーのみの矢印>
arrow_03.png


コード例はこちら

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS arrow</title>
    <link rel="stylesheet" type="text/css" href="arrow_sample.css">
   <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
  </head>
  <body>
    <div class="arrow_on"><span>矢印 べた塗り</span></div>
    <div class="arrow_off"><span>矢印 枠のみ</span></div>
  </body>
</html>

CSS


/* 矢印べた塗り */
.arrow_on {
    display:inline-block;
    height:25px;
    width:170px;
    background-color:#00783c;
    position:relative;
    margin: 20px 40px 0 0;
}
.arrow_on:before {
    position:absolute;
    content:"";
    width:0;
    height:0;
    border:25px solid transparent;
    border-left:25px solid #00783c;
    left:170px;
    top:-13px;
}
.arrow_on span{
    font-size: 14.4px;
    font-weight: 600;
    color: #FFF;
    display: block;
    margin: 3px 0 0 10px;
}
/* 矢印枠のみ */
.arrow_off {
    display: inline-block;
    height: 28px;
    width: 174px;
    background-color: #FFF;
    position: relative;
    margin: 20px 40px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #00783c;
    border-right-color: #FFF;
    z-index: auto;
}
.arrow_off:before {
    position:absolute;
    content:"";
    width:0;
    height:0;
    border:25px solid transparent;
    border-left:25px solid #00783c;
    left:170px;
    z-index: -1;
    top:-13px;
}
.arrow_off:after {
    position:absolute;
    content:"";
    width:0;
    height:0;
    border:20px solid transparent;
    border-left:20px solid #FFF;
    left:172px;
    top:-8px;
    z-index: -1;
}
.arrow_off span{
    font-size: 14.4px;
    font-weight: 600;
    color: #666;
    display: block;
    margin: 3px 0 0 10px;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6