Little Strange Software

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

【駄文】最近やってる事

 
どうも!LSSです!!
最近、ちょっとこういう
「長方形をナナメに分けた背景」
CSSでスマートに表現するには?
に挑戦してみたりしています。

 

 

…これがなかなか実は難しい^^;

 

「こういう、って、できてるじゃないか」と思われるかもですが、↑のは決してスマートとは言えない方法でやってますw

 

コードはこんな感じ

<div style="position: relative; width: 300px; height: 200px;">
<div style="position: absolute; top: 0px; left: 0px; border-style: solid; border-color: yellowgreen black white white; border-width: 200px 300px 0px 0px; width: 300px; height: 200px;"> </div>
<div style="position: absolute; top: 0px; left: 0px; color: white; width: 300px; height: 200px; padding: 10px;">どうも!LSSです!!<br />最近、ちょっとこういう<br />「長方形をナナメに分けた背景」<br />をCSSでスマートに表現するには?<br />に挑戦してみたりしています。</div>
</div>

 

 以前記事にした、borderで三角形を書く要領で、 

ナナメに分かれた長方形を描く、ってところまでは、

 

 

<div style=" border-style: solid; border-color: yellowgreen black white white; border-width: 200px 300px 0px 0px; width: 300px; height: 200px;"> </div>

 

こんな感じのコードで実現できるのですが、これを普通に「背景」として使用する事ができなくて、強引にレイヤーを2つ重ねるような事をしたのが最初の例になります。

 

 

「長方形をナナメに分ける」方法としては、これの他に思いつくのは「linear-gradientで角度を調整する」という方法があり、そちらは背景として普通に使えます。

が、スマートと言えるかどうか…^^;;;

 

 

あと、HTMLやCSSと関係ないんですが、「スーツのジャケット…ぽく見える服」と「ネクタイ」を買ってきたりしました。

 

何をやろうとしてるのやら?w

 

 

 

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

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