CSS は基本的な geometry_html/css_WEB-ITnose を実装します

CSS3 では、border-radius、アニメーション、transform などの「新しい」機能を通じて、多くの精緻なグラフィックスを描画できることがわかっています。たとえば、テンセントのペンギンのロゴ、スーパーマリーンズのベイマックスロボット、ソーラーシステム、ミニオン、ジングルキャット、アンドロイドロボット、アップルのアイコンなどです。

これらのグラフィックスは実装がかなり複雑に見えますが、通常は長方形、円、楕円、三角形、台形などの基本的なグラフィックスで構成されます。したがって、基本的なグラフィックスから始めて、慣れてくると、複雑なグラフィックスを実装できるようになります。

まず幅と高さの属性を持つ要素である長方形から開始し、その幅と高さの値を設定し、ブロック表示して長方形を取得します。

長方形を基準にborder-radiusを設定すると、角丸長方形、円（長方形が正方形で四隅のborder-radiusを正方形の幅の半分に設定した場合）が得られます。 ）と楕円（長方形の境界半径を正方形の幅の半分に設定した場合）、四隅の境界半径を50％に設定した場合）。

三角形は以下のように実装されています。境界線属性を見てみましょう。隣接する境界線がある場合、隣接する境界線の接続部分は長方形の直角になります。直角を形成するには、隣接する境界線がそれぞれ直角を形成します。長方形と、この直角三角形の直角の一辺の長さが境界線の幅になります。したがって、境界線の色の 1 つを透明または現在の背景色に設定するだけで、視覚効果は三角形になります。コードを参照してください:

#div_RightAngle1{ //直角三角形1    width:0;    height:0;    border-width:30px;    border-style:solid;    border-top-color:#abc;    border-right-color:#abc;    border-bottom-color:#fff;    border-left-color:#fff;}#div_RightAngle2{ //直角三角形2    width:0;    height:0;    border-width:30px;    border-style:solid;    border-color:#fff;    border-top-color:#abc;}#div_anyAngle{ //任意三角形    width:0;    height:0;    border-left:25px solid #fff;    border-right:25px solid #fff;    border-bottom: 50px solid #abc;}

以下では、border と Transform を組み合わせて、興味深い曲線の矢印を実装します。レンダリングは次のようになります。まず直角三角形の div を構築し、transform によって特定の角度だけ回転させ、その後、after 疑似クラスを使用して丸い角による曲げ効果を作成します。コードを参照してください:

#divArrow{ //弯曲箭头    position: relative;    width:0;    height:0;    border-top:9px solid transparent;    border-right:9px solid red;    transform:rotate(10deg);}#divArrow:after{    position:absolute;    content:"";    border-top:3px solid red;    border-radius:15px 0 0 0;    top:-12px;    left:-9px;    width:12px;    height:12px;    transform:rotate(45deg);}

次に台形を実装します。幅と高さを 0 に設定し、3 辺に境界線を持ち、1 辺に表示色を持つ直角三角形を構築できることはすでに知っています。次に、要素に幅を持たせると、隣接する要素を引き伸ばすことができます。このようにして、要素内に四角形が作成されます。コードを参照してください。

#div_Trapezoid{    width:25px;    height:0;    border-bottom:50px solid #abc;    border-left:50px solid #fff;    border-right:50px solid #fff;}

これを使用して、曲線矢印を実装することもできます。コードを参照してください:

#div_Parallelogram{    width:200px;    height:100px;    transform:skew(30deg);}

正方形を 45 度回転してひし形を作成することもできます。同様に、三角形を実装する (2 つの直角三角形を組み合わせる) というアイデアも使用できます。

#diamond1{    width:20px;    height:20px;    transform:rotate(45deg);}#diamond2{    width:0;    height:0;    border: 25px solid #fff;    border-bottom-color:#abc;    position:relative;}#diamond2:after{    position: absolute;    content:"";    left:-25px;    top:25px;    width:0;    height:0;    border: 25px solid #fff;    border-top-color:#abc;}

次に、シールド効果を実現するためにひし形の変形を実行します:

#diamond_Shield{    width:0;    height:0;    border:50px solid #fff;    border-bottom: 20px solid #abc;    position:relative;}#diamond_Shield:after{    position: absolute;    content:"";    top:20px;    left:-50px;    width:0;    height:0;    border:50px solid #fff;    border-top: 70px solid #abc;}

次に、ひし形と台形に基づいてひし形の形状を実装します:

#diamond3{    width:50px;    height:0;    position: relative;    border-style: solid;    border-color:#fff #fff #abc #fff;    border-width: 0 25px 25px 25px;}#diamond3:after{    position: absolute;    content:"";    top:25px;    left:-25px;    width:0;    height:0;    border-style: solid;    border-color: #abc #fff #fff #fff;    border-width: 70px 50px 0 50px;}

小さな家を実現する:

#house{    background-color: #abc;    height:55px;    width:100px;    position:relative;}#house:before{    content:"";    position:absolute;    height:0;    width:0;    left:0;    top:-35px;    border-bottom: 35px solid #abc;    border-left: 50px solid #fff;    border-right: 50px solid #fff;}

上の三角形を基に、片側を円弧状にして扇形を形成します:

#cone{    background-color: #fff;    width:0;    height:0;    border-left: 70px solid transparent;    border-right: 70px solid transparent;    border-top: 100px solid #abc;    border-radius:50%;}

三日月形を実現したい場合はどうすればよいでしょうか?三日月は 2 つの弧で構成されているため、各弧は円の弧の長さの一部と見なすことができます。そのため、円に基づいて円に影を与えることでこれを実現できます。

#moon{    background-color: #fff;    width:80px;    height:80px;    border-radius:50%;    box-shadow: 15px 15px 0 0 #abc;}

Triangle台形は五角形に組み合わせることができます。以下でそれを理解しましょう:

#pentagon{    background-color: #fff;    position: relative;    width:54px;    border-width: 50px 18px 0;    border-style:soild;    border-color: #abc transparent;}#pentagon:after{    content:"";    position:absolute;    height:0;    width:0;    top: -85px;    left:-18px;    border-width: 0 45px 35px;    border-style: solid;    border-color: transparent transparent #abc;}

六角形は 2 つの三角形と 1 つの長方形で構成でき、八角形は 2 つの台形と 1 つの長方形で構成できます。五芒星は 2 つの台形と三角形の組み合わせを回転させることで実現できますが、ここでは説明しません。

明日は中国のバレンタインデーです、最後にハートの形を作りましょう、そして世界中のすべての恋人たちが最終的には結婚することを願っています:

#heart{    width:0;    height:0;    position:relative;}#heart:before,#heart:after{    position: absolute;    content:"";    left:50px;    top:0;    width: 50px;    height:80px;    background: red;    border-radius: 50px 50px 0 0;    transform: rotate(-45deg);    transform-origin: 0 100%;}#heart:after{    left:0;    transform:rotate(45deg);    transform-origin:100% 100%;}

(これは単なるデモンストレーションであるため、上記のスタイルにはプレフィックスが付いていません)

これらの基本的なグラフィックスの実現により、将来的には複雑なグラフィックスも実現できるようになります。