三角形、矢印、吹き出しをcssだけで作る方法【コードをコピーして使い回せます】

2021年4月5日2022年3月29日

このページでは、CSSだけで作る三角形、矢印、吹き出しなどのコードサンプルを紹介します。

サンプルイメージとCSSコード

右向きの矢印

矢印

◆HTML
<p>矢印<span class="sample_arrow_right"></span></p>

◆CSS
.sample_arrow_right,
.sample_arrow_right span{
  display: inline-flex;
  align-items: center;
}
.sample_arrow_right span:before{
  content: "";
  width: 25px;
  border-top: 1px solid #669bed;
  display: inline-block;
}
.sample_arrow_right span:after{
  content: "";
  border-left: 15px solid #669bed;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  display: inline-block;
}

右向きの三角形

矢印

◆HTML
<p class="sample_triangle_right">三角形</p>

◆CSS
.sample_triangle_right{
  display: flex;
  align-items: center;
}
.sample_triangle_right:after{
  content: "";
  border-left: 15px solid #669bed;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  display: inline-block;
}

下向きの矢印（三角形）

矢印

◆HTML
<p class="sample_arrow_bottom">矢印</p>

◆CSS
.sample_arrow_bottom{
  position: relative;
}
.sample_arrow_bottom:after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-top: 30px solid #f3a8f8;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  width: 100px;
}

鋭利な形の三角形

矢印

◆HTML
<p class="sample_arrow_bottom_eiri">矢印</p>

◆CSS
.sample_arrow_bottom_eiri{
  position: relative;
}
.sample_arrow_bottom_eiri:before{
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  margin: auto;
  border-top: 20px solid #fff;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  width: 100px;
  z-index: 1;
}
.sample_arrow_bottom_eiri:after{
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  margin: auto;
  border-top: 40px solid #ff7777;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  width: 100px;
  z-index: 0;
}

吹き出し風の三角形

吹き出し内のメッセージです。

◆HTML
<p class="sanmple_fukidashi">吹き出し内のメッセージです。</p>

◆CSS
.sanmple_fukidashi{
  position:relative;
  margin-bottom: 3rem;
  border: solid 1px #8cfc90;
  border-radius: 7px;
  padding: 10px 20px;
  display: inline-block;
  margin-left: 20px;
}
.sanmple_fukidashi:before{
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  margin: auto;
  border-right: 10px solid #8cfc90;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  width: 20px;
}
.sanmple_fukidashi:after{
  content: "";
  position: absolute;
  top: 10px;
  left: -18px;
  margin: auto;
  border-right: 10px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  width: 20px;
}