Little Strange Software

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

【CSS】菱餅の区切り線【ギリギリの時節ネタ】

 どうも!LSSです!!

 

今日は3/2。明日は ひなまつり ですね^^

それにちなんだ記事を用意されている方もおられるかと思いますが、このギリギリのタイミングで、ひなまつりネタのCSSです!

 

 

菱餅の区切り線

 

 

 

コード

<style>
.hishimochi{
height:45px;
background-image:
conic-gradient(from 120deg at 50% 66%,#ff8888 120deg,#ff888800 120deg)
,conic-gradient(from 300deg at 50% 29%,#ff8888 120deg,#ff888800 120deg)
,conic-gradient(from 300deg at 50% 31%,#ffcccc 120deg,#ffcccc00 120deg)
,conic-gradient(from 300deg at 50% 43%,#ff8888 120deg,#ff888800 120deg)
,conic-gradient(from 300deg at 50% 55%,#f8f8f8 120deg,#f8f8f800 120deg)
,conic-gradient(from 300deg at 50% 66%,#88ff88 120deg,#88ff8800 130deg)
;
background-position:0px 15px;
background-size:45px 45px;
filter:drop-shadow(4px 3px 5px #888888);
}
</style>
<div class="hishimochi"> </div>

 

 

ひなまつり要素のうちで、CSSネタにしやすいのは…

と考えると、菱餅一択でした。

 

あと、記事冒頭で使ったひなまつりは、

<span style="background: linear-gradient(#ff8888,#ffffff,#88ff88);"><strong>ひなまつり</strong></span>

こんな感じでlinear-gradientをシンプルに書いています。

 

 

 

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

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