Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS小ネタ】conic-gradientで矢印を描いてみた

 どうも!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">&nbsp;</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">&nbsp;</span></p>

 

 

あとがき

どちらも、2種類の三角をconic-gradientで描いたものを、重ねただけのものになります。

 

width:1em;height:1em;

で1文字分のサイズを指定していますが、ここを変更する事でサイズを変更する事ができます。(縦横のサイズは合わせておかないと形が崩れたりはします^^;)

 

<style>~</style>

を一度書いておくと、あとは同じページ(記事)の中で、

<span class="arrowl">&nbsp;</span>

を いくつ書いても、その箇所に矢印が表示されるようになります^^

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^