コピペで使えるCSSだけでつくる矢印・三角形

投稿日：2021/11/23 ｜最終更新：2021/11/24
CSS

実務でよく使うCSSだけで使う矢印・三角形をまとめておきます。

シンプルな矢印アイコン１

プレビュー

サンプルコード

<div class="box-sample">
    <u class="arrow-1-l"></u>
    <u class="arrow-1-t"></u>
    <u class="arrow-1-r"></u>
    <u class="arrow-1-b"></u>
</div>

.arrow-1-l{
    display: inline-block;
    width: 20px; /* 大きさ */
    height: 20px; /* 大きさ */
    margin: 0 20px;
    border-top: 2px solid #ff0000; /* 線の太さ・色 */
    border-left: 2px solid #ff0000; /* 線の太さ・色 */
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.arrow-1-t{
    display: inline-block;
    width: 20px; /* 大きさ */
    height: 20px; /* 大きさ */
    margin: 0 20px;
    border-top: 2px solid #1800ff; /* 線の太さ・色 */
    border-left: 2px solid #1800ff; /* 線の太さ・色 */
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.arrow-1-r{
    display: inline-block;
    width: 20px; /* 大きさ */
    height: 20px; /* 大きさ */
    margin: 0 20px;
    border-top: 2px solid #4ee652; /* 線の太さ・色 */
    border-left: 2px solid #4ee652; /* 線の太さ・色 */
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.arrow-1-b{
    display: inline-block;
    width: 20px; /* 大きさ */
    height: 20px; /* 大きさ */
    margin: 0 20px;
    border-top: 2px solid #000; /* 線の太さ・色 */
    border-left: 2px solid #000; /* 線の太さ・色 */
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

シンプルな三角形アイコン１

プレビュー

サンプルコード

<div class="box-sample">
    <u class="arrow-2-l"></u>
    <u class="arrow-2-t"></u>
    <u class="arrow-2-r"></u>
    <u class="arrow-2-b"></u>
</div>

.arrow-2-l{
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 1em;
    border: 1em solid transparent;
    border-right: 1em solid #ff0000; /* 三角形の方向・大きさ・色 */
}
.arrow-2-t{
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 1em;
    border: 1em solid transparent;
    border-bottom: 1em solid #1800ff; /* 三角形の方向・大きさ・色 */
}
.arrow-2-r{
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 1em;
    border: 1em solid transparent;
    border-left: 1em solid #4ee652; /* 三角形の方向・大きさ・色 */
}
.arrow-2-b{
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 1em;
    border: 1em solid transparent;
    border-top: 1em solid #000; /* 三角形の方向・大きさ・色 */
}

シンプルな三角形アイコン２

プレビュー

サンプルコード

<div class="box-sample">
    <u class="arrow-3-l"></u>
    <u class="arrow-3-t"></u>
    <u class="arrow-3-r"></u>
    <u class="arrow-3-b"></u>
</div>

.arrow-3-l{
  display: inline-block;
  margin: 0 1em;
  border-style: solid;
  border-width: 1em 1.7em 1em 0; /* 三角形の方向・大きさ */
  border-color: transparent #ff0000 transparent transparent; /* 三角形の色 */
}
.arrow-3-t{
  display: inline-block;
  margin: 0 1em;
  border-style: solid;
  border-width: 0 1em 1.7em 1em; /* 三角形の方向・大きさ */
  border-color: transparent transparent #1800ff transparent; /* 三角形の色 */
}
.arrow-3-r{
  display: inline-block;
  margin: 0 1em;
  border-style: solid;
  border-width: 1em 0 1em 1.7em; /* 三角形の方向・大きさ */
  border-color: transparent transparent transparent #4ee652; /* 三角形の色 */
}
.arrow-3-b{
  display: inline-block;
  margin: 0 1em;
  border-style: solid;
  border-width: 1.7em 1em 0 1em; /* 三角形の方向・大きさ */
  border-color: #000 transparent transparent transparent; /* 三角形の色 */
}