Little Strange Software

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

【CSS】対角線を描くのが難しいけど、解決した話

 どうも!LSSです!!

 

一昨日~昨日と、

続けざまにconic-gradientネタを書いていました。

 

が、このconic-gradient、調べものをしていた時に偶然見つけたもので、元々調べていたのはlinear-gradientについてだったりしますw

 

CSSで↓のような対角線を扱うのが、予めサイズが決まっているとborderやlinear-gradient+角度指定でも可能なところ、サイズが可変(例えば画面サイズの幅100%とか)の時には極端に難しかったりします。

 

 

 

これが、↓のように、linear-gradientに「to bottom right」のようにつけると、何故か出来てしまったりします。

 

コード

<div style="
width: 300px;
height: 200px;
background-image: linear-gradient(to bottom right,#cceeee 50%,#ffffff 51%);
border: 1px solid black;
"> </div>

 

…という事を知り、その話を詳しく書こうと思って調べていたところでconic-gradientを見つけてびっくりした勢いだったんですねw

 

この対角線の話はいずれまた掘り下げたいと思います。

 

 

 

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

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