どうも!LSSです!!
conic-gradientを使って、矢印を描いてみました。
2021/12/1 コードちょっと修正
左矢印
ここ見て!
コード
<style>
.arrowl{
display:inline-block;
background-image:
conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg),
conic-gradient(from 75deg at 0% 50%,#ff0000ff 30deg,#ff000000 30deg);
background-size:50% 100%,100% 100%;
background-repeat:no-repeat;
width:1em;height:1em;
}
</style>
<p>ここ見て!<span class="arrowl"> </span></p>
上矢印
ここ見て!
コード
<style>
.arrowu{
display:inline-block;
background-image:
conic-gradient(from 135deg at 50% 0%,#ff0000ff 0deg 90deg,#ff000000 90deg),
conic-gradient(from 165deg at 50% 0%,#ff0000ff 30deg,#ff000000 30deg);
background-size:100% 50%,100% 100%;
background-repeat:no-repeat;
width:1em;height:1em;
}
</style>
<p>ここ見て!<span class="arrowu"> </span></p>
あとがき
どちらも、2種類の三角をconic-gradientで描いたものを、重ねただけのものになります。
width:1em;height:1em;
で1文字分のサイズを指定していますが、ここを変更する事でサイズを変更する事ができます。(縦横のサイズは合わせておかないと形が崩れたりはします^^;)
<style>~</style>
を一度書いておくと、あとは同じページ(記事)の中で、
<span class="arrowl"> </span>
を いくつ書いても、その箇所に矢印が表示されるようになります^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^