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

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

これらのグラフィックの描画には、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: