Little Strange Software

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

【CSS】一応、スペードも描いてみました【小ネタ】

 どうも!LSSです!!

 

【ツール】ハートマーク背景コード生成ツール - Little Strange Software

で様々なハートマークを描けるようになりました。

 

ハートマークはバレンタインデーからの連想ですが、トランプのマークのひとつでもありますね。

とすれば、スペードやダイヤ、クローバーもあってもいいんじゃないか?と、とりあえずハートマークからの改変で作りやすいスペードを描いてみました。

 

 

スペード

 

 

 

コード

<style>
.spade{
height:300px;
background:
radial-gradient(closest-corner circle at 90% 10%,#000000 99.9%,transparent 100%) 0px 0px/60px 60px
,radial-gradient(closest-corner circle at 10% 10%,#000000 99.9%,transparent 100%) 0px 0px/60px 60px
,conic-gradient(from 45deg at 80% 100%,#000000 45deg,transparent 45deg) 0px 0px/60px 60px
,conic-gradient(from 270deg at 20% 100%,#000000 45deg,transparent 45deg) 0px 0px/60px 60px
,conic-gradient(from 170deg,#000000 20deg,transparent 20deg) 30px 20px/60px 60px
;
}
</style>
<div class="spade"> </div>

 

 

実際のところ…

「ハートマークを上下逆に描き、足をつけただけ」というお手軽仕様ですw

どうせならクローバー、ダイヤ、と3種類いっぺんに出そうかと思ったりもしましたが…なにげにクローバーがちょっと難しいかも?

ちなみに、ダイヤは「単に菱形」として描けば一番簡単だったりします。

 

 

 

 

コード

<style>
.dia{
height:300px;
background:
conic-gradient(from 30deg at 80% 50%,#ff0000 120deg,transparent 120deg) 0px 30px/60px 60px
,conic-gradient(from 210deg at 20% 50%,#ff0000 120deg,transparent 120deg) 0px 30px/60px 60px
;
}
</style>
<div class="dia"> </div>

 

 

クローバー

 

 

コード

<style>
.clover{
height:300px;
background:
radial-gradient(8px circle at 50% 55%,#000000 99.9%,transparent 100%) 30px 20px/60px 60px
,radial-gradient(8px circle at 35% 75%,#000000 99.9%,transparent 100%) 30px 20px/60px 60px
,radial-gradient(8px circle at 65% 75%,#000000 99.9%,transparent 100%) 30px 20px/60px 60px
,conic-gradient(from 170deg,#000000 20deg,transparent 20deg) 30px 20px/60px 60px
;
}
</style>
<div class="clover"> </div>

 

それでも、一応描いてみるとこんな感じです。

 

 

あとがき

という、需要があるかどうかは謎ですが、自分的に挑戦してみた、という感じの小ネタでしたw

フォントにもこれらの絵文字はありますが、「いずれ絵文字に依存せずにトランプを題材にしたゲーム」でも作る事があれば、役に立つ時がくるのかも?

 

 

 

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

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