実務でよく使う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; /* 三角形の色 */
}
