幾何学模様を描く

○○を描いてみようシリーズもこれで最後(の予定)。ラストを飾るのは幾何学模様。 使うプロパティはborderです。

テクニック使用後

なかなかおもしろいでしょ？

やり方

HTMLはこんな感じになります。

<div id="a"></div>

スタイルシートはこんな感じになります。

#a{
    font-size:0px;
    width:0px;
    height:0px;
    border-width:50px 50px;
    border-style:solid;
    border-color:#d9a100 #000000;
}

サンプルの組み合わせは以下のようになってます。
#b{
    border-width:0px 0px 100px 100px;
    border-style:solid;
    border-color:#d9a100 #000000;
}
#c{
    border-width:0px 0px 100px 100px;
    border-style:double;
    border-color:#d9a100 #000000;
}
#d{
    border-width:50px;
    border-style:double;
    border-color:#d9a100 #000000;
}
#e{
    border-width:50px;
    border-style:inset outset;
    border-color:#d9a100 #cccccc;
}
#f{
    border-width:0px 0px 100px 150px;
    border-style:double;
    border-color:#d9a100 #ffffff;
}
#g{
    border-width:50px;
    border-style:groove;
    border-color:#d9a100;
}
#h{
    border-width:50px 50px;
    border-style:solid double;
    border-color:#d9a100 #000000;
}
#i{
    border-width:50px 50px 0px 50px;
    border-style:solid double;
    border-color:#d9a100 #000000;
}

四角を描くの応用技術になります。

font-size,height,widthを0pxにして、borderを指定すると、組み合わせによってサンプルのような幾何学模様を描くことができます。

border-styleにdottedやdashedを使った場合や、border-widthの組み合わせによっては上手く表示されないこともあります。 あと、IEとfirefoxでは微妙に違うところがでてきます。

使い道は・・・。まぁ、アイディア次第ということで。

---