LoginSignup
42

More than 5 years have passed since last update.

CSSで図形を描く仕組み

Last updated at Posted at 2014-07-14

borderを使って三角形を描く方法まとめ

釣りのためにタイトルはああなっているけど、原理を知る上で重要なのは台形の描き方。

まずは、よくサンプルで見かけるものから。

    <div style="width: 0px;
                height: 0px;
                border-top: 20px solid #000;
                border-right: 20px solid #F00;
                border-bottom: 20px solid #0F0;
                border-left: 20px solid #00F;">
    </div>

border-square.png

このdivにwidthとheightを指定すると、

    <div style="width: 10px;
                height: 10px;
                border-top: 20px solid #000;
                border-right: 20px solid #F00;
                border-bottom: 20px solid #0F0;
                border-left: 20px solid #00F;">
    </div>

border-square2.png

こうなる。

仕組み

borderがどのように生成されているかを理解するために、あと2つの例を出す。

    <div style="width: 10px;
                height: 10px;
                border-bottom: 20px solid #0F0;">
    </div>

border-square3.png

    <div style="width: 10px;
                height: 10px;
                border-right: 20px solid #F00;
                border-bottom: 20px solid #0F0;">
    </div>

border-square4.png

つまり、border-bottomの例では、こうやってborderが描画されている。
border-square5.png

三角形を描きたい場合は、divのwidthを0pxにすることで、div寄りの辺の長さを0にしている。
これで自由自在!

    <div style="margin: auto;
                width: 0px;
                height: 0px;
                border-right: 80px solid transparent;
                border-bottom: 40px solid #0F0;
                border-left: 20px solid transparent;">
    </div>

border-triangle.png

borderを使って三日月形を描く

border-radiusを利用すれば、三日月形の描画もできる。


<div style="width: 30px;
height: 70px;
border-left: 20px solid #FF0;
border-radius: 120px 0px 0px 120px / 90px 0px 0px 90px;">
</div>

crescent.png

仕組み

なぜこういう形になるかは、divに色を付けるとわかりやすい。

    <div style="width: 30px;
                height: 70px;
                border-left: 20px solid #FF0;
                border-radius: 120px 0px 0px 120px / 90px 0px 0px 90px;
                background-color: #000;">
    </div>

crescent2.png

三日月形のポイントは、

  1. 出っ張らせたい側のborder-radiusの値を大きめにとる
  2. 他のborderを描かない

の2点である。
1 については、角を思いっきり丸めて div で半円型を作ることでこのような形になる。

2 については、組み合わせ次第で妙な形を作ることもできるので、応用する場合は自由である。

    <div style="width: 60px;
                height: 19px;
                border-top: 14px solid #ff6c00;
                border-right: 1px solid #ff6c00;
                border-bottom: 13px solid #ff6c00;
                border-left: 1px solid #ff6c00;
                border-radius: 60px 60px 20px 20px / 60px 60px 20px 20px;
                background-color: #339a14;">
    </div>

crescent3.png

ハンバーガーに…見えないですね。すごいや。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42