Little Strange Software

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

【CSS】今年のクリスマスは~【準備編】

 どうも!LSSです!!

 

またクリスマスが近づいてきていますね。

コンビニとかで、チキンやケーキの予約のPOPを見かけたりするようになりました。

 

このブログでは昨年、

【CSS】CSSでクリスマスツリーを描いてみる【第三弾】 - Little Strange Software

といった感じでCSSお絵描きでクリスマスツリーを描いたりしていましたが、ツリーを構成する三角をborderで表現していたんでした。

【CSS・border】borderで三角形が作れる!?という事に今更びっくりした話 - Little Strange Software

 

が、今年は「conic-gradient」が使えます!

conic-gradientを使う事でも三角形を表現できるので、コードの書き方が変わってきそう。

 

ちょっと練習してみます。

 

 

 

コード

<style>
.midori{
width:300px;
height:300px;
border:1px solid black;
background-image:conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg 210deg,#00880000 210deg);
background-size:300px 200px;
background-repeat:no-repeat;
}
</style>
<div class="midori"> </div>

 

こんな感じですね。

このbackground-imageに、複数のconic-gradientを入れて、background-positionで位置をずらしたら…。

 

 

 

コード

<style>
.midori2{
width:300px;
height:485px;
border:1px solid black;
background-image:
conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg 210deg,#00880000 210deg)
,conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg 210deg,#00880000 210deg)
,conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg 210deg,#00880000 210deg);
background-size:300px 200px;
background-position:0px 0px,0px 100px,0px 200px;
background-repeat:no-repeat;
}
</style>
<div class="midori2"> </div>

 

divタグひとつで、連なった3つの三角形を重ねて描画する事ができました!
(borderを使った方法だと三角ひとつごとにdivが必要でした)

 

…全く同じ内容のconic-gradientを3回も繰り返して書くのがちょっとアレですが^^;

 

っと。もっとconic-gradientらしい事をしようとすると…

 

 

 

コード

<style>
.midori3{
width:300px;
height:485px;
border:1px solid black;
background-image:
conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg,#00c400ff 173deg 187deg,#008800ff 210deg,#00880000 210deg)
,conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg,#00c400ff 173deg 187deg,#008800ff 210deg,#00880000 210deg)
,conic-gradient(at 50% 0%,#00880000 150deg,#008800ff 150deg,#00c400ff 173deg 187deg,#008800ff 210deg,#00880000 210deg);
background-size:300px 200px;
background-position:0px 0px,0px 100px,0px 200px;
background-repeat:no-repeat;
}
</style>
<div class="midori3"> </div>

 

グラデーションの内容に手を加える事で、少し立体ぽく?表現できるかもですね^^

 

 

 

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

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