div+css3 は基本的なグラフィックスを描画します_html/css

div+css3 は基本的なグラフィックスを描画します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:18:47

オリジナル

1129 人が閲覧しました

基本的なグラフィックには、長方形、角丸長方形、円、楕円、三角形、値線、円弧が含まれます

これらのグラフィックの描画には、IE8 に関係なく、CSS の角丸属性が使用されます。

次の実装は Chrome ブラウザを通じて実行されます。

1. 長方形

は比較的単純で、CSS を通じて幅、高さ、背景色を設定するだけです。

html:

<div class="rectangle"></div>

ログイン後にコピー

css:

        .rectangle {            width: 150px;            height: 100px;            background-color: orangered;        }

ログイン後にコピー

レンダリング:

2. 角丸長方形

長方形に基づく角度設定、円を追加角度属性設定、ここで使用単位は全体のサイズの変化に適応できるという利点があります。

html:

<div class='rounded-rectangle'></div>

ログイン後にコピー

css:

        .rounded-rectangle {            width: 150px;            height: 100px;            background-color: orangered;            border-radius: 10%;        }

ログイン後にコピー

Rendering:

3. 円を正方形に設定し、角を丸くします。 0% で十分です。実際には角が丸くなっています。半径正方形の半径です。

html:

<div class='circle'></div>

ログイン後にコピー

css:

        .circle {            width: 100px;            height: 100px;            background-color: orangered;            border-radius: 50%;        }

ログイン後にコピー

Rendering:

4. 円に基づいて、正方形から単なる長方形まで。

html:

<div class='ellipse'></div>

ログイン後にコピー

css:

        .ellipse {            width: 150px;            height: 100px;            background-color: orangered;            border-radius: 50%;        }

ログイン後にコピー

レンダリング:

5. 三角形

一見すると、三角形は何もないように見えます。最初から、準備はできていません- made メソッドを使用して 1 ステップで正しく描画できます。これを完成させるには、境界線機能を使用して描画する必要があります。これは非常に興味深いものです。

html:

<div class='triangle'></div>

ログイン後にコピー

分解 1

それでは、興味深い境界線を見てみましょう。正方形を作成し、幅と高さを 100 ピクセルに設定し、四辺の境界線の幅を 10 ピクセルに設定します。、それぞれエッジに異なる色を設定します。

        .triangle{            width: 100px;            height: 100px;            border-style: solid;            background-color: orangered;            border-top-color: red;            border-right-color: green;            border-bottom-color: blue;            border-left-color:blueviolet;            border-top-width: 10px;            border-bottom-width: 10px;            border-left-width: 10px;            border-right-width: 10px;        }

ログイン後にコピー

提示してみたら、とても興味深いことが分かりました。 2 つの境界辺の交差点がベベル辺です

分解 2

引き続き各辺の幅を拡大し、幅を設定します。正方形の高さを 0px に設定し、各辺の境界線の幅を 50px (元の正方形の幅または高さの半分) に設定します

        .triangle{            width: 0px;            height: 0px;            border-style: solid;            background-color: orangered;            border-top-color: red;            border-right-color: green;            border-bottom-color: blue;            border-left-color:blueviolet;            border-top-width: 50px;            border-bottom-width: 50px;            border-left-width: 50px;            border-right-width: 50px;        }

ログイン後にコピー

希望の形状がすべての面に表示されますか?これは興味深い境界線です。

分解 3

最後のステップは簡単で、不要なエッジをすべて透明にし、下端のみを残し、背景を透明にします。

        .triangle{            width: 0px;            height: 0px;            border-style: solid;            background-color: transparent;            border-top-color: transparent;            border-right-color: transparent;            border-bottom-color: blue;            border-left-color:transparent;            border-top-width: 50px;            border-bottom-width: 50px;            border-left-width: 50px;            border-right-width: 50px;        }

ログイン後にコピー

側面と背景を透明化すると、必要な三角形が出てきて、とても興味深いです。

鈍角にしたい場合は底辺の幅を狭くし、鋭角にしたい場合は幅を広げてください。

直角の場合は、左右の境界線の幅を0pxに設定します。

各辺の幅の値を調整することで、さまざまな三角形を実現できます。

6. 直線

直線は、高さまたは幅を圧縮して直線になります。

html:

<div class='line'></div>

ログイン後にコピー

css:

        .line{            width: 100px;            height: 3px;            background-color: orangered;        }

ログイン後にコピー

レンダリング:

7. Arc

は基本的に丸い角を使用して実装されます。ここで、長方形の左上隅を丸くする必要があります円弧として描画し、右と下の境界線の幅を 0px に設定して非表示にします。左上隅の半径を 0px に設定して、より大きく見やすくします。このようなアークが完成します。

html:

<div class='arc'></div>

ログイン後にコピー

css:

        .arc {            width: 100px;            height: 100px;            border-style: solid;            border-top-width: 10px;            border-bottom-width: 0px;            border-left-width: 10px;            border-right-width: 0px;            border-top-color: blue;            border-bottom-color: red;            border-left-color: red;            border-right-color: red;            background-color: transparent;            border-top-right-radius: 0px;            border-top-left-radius: 100px;            border-bottom-right-radius: 0px;            border-bottom-left-radius: 0px;        }

ログイン後にコピー

rendering: