→矢印を作る

LastModified
Category CSS

概要

cssで矢印の作り方と使い方

関連

△三角形を作る
borderを使って三角形を作る

HTML・CSS


<span class="arrow01"></span>

.arrow01{
    display: flex;
    align-items: center;
}
.arrow01:before{
    content: "";
    display: block;
    height: 10px;
    width: 20px;
    background-color: #333;
}
.arrow01:after{
    content: "";
    display: block;
    border: 16px solid transparent;
    border-left-color: #333;
    border-right: 0;
}

使用例


<a class="button button-default">
    <i class="arrow01"></i>
    Link
</a>

a .arrow01{
    justify-content: center;
    border: 1px solid #333;
    border-radius: 8px;
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
a .arrow01:before{
    height: 3px;
    width: 6px;
}
a .arrow01:after{
    border: 5px solid transparent;
    border-left-color: #333;
    border-right: 0;
}