どうも！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タグひとつで、連なった３つの三角形を重ねて描画する事ができました！
（borderを使った方法だと三角ひとつごとにdivが必要でした）
…全く同じ内容のconic-gradientを３回も繰り返して書くのがちょっとアレですが^^;
っと。もっと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>
グラデーションの内容に手を加える事で、少し立体ぽく？表現できるかもですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^