【駄文】最近やってる事

 

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

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

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

コードはこんな感じ

<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>

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

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

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

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

何をやろうとしてるのやら？ｗ

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

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