CSSで三角形を描く方法 + CSSで月を描く方法

 1.CSS描画三角形

border 属性を使用するだけです。

原則は次のとおりです。

要素の幅と高さを 0 に設定します。

            幅: 0px;
            高さ: 0px;

次に、要素の 4 方向の境界線に同じスタイルと透明色を設定します。

            境界線: 100 ピクセルの透明な実線。

次に、三角形を形成したい場合は、その辺の色を透明に変更するだけです。

            ボーダー右の色:青 ;

原理図は次のとおりです。 

分析：このように分けられます

 

 例えば：

    <style>
        .box{
            width: 0px;
            height: 0px;
            border: 100px solid transparent;
            border-right-color:blue ;
        }
    </style>
    <div class="box"></div>

コードは次のように書くこともできます。 

    <style>
        .box{
            width: 0px;
            height: 0px;
            border-bottom:100px solid transparent;
            border-top: 100px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid blue;
        }
    </style>
    <div class="box"></div>

 

2. CSSで月を描く

主に使用される: box-shadowボックスシャドウ、boder-radius要素の丸い境界線、

背景色:透明要素の背景を透明に設定します。

    <style>
        .box{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            /*设置元素圆角边框 将元素设置为一个圆形*/
            border-radius: 50%;
            /* 左偏移量，右偏移量，模糊距离，阴影颜色 */
            box-shadow: -50px 50px 0px orange; 
            /* 将元素背景设置为透明，遮住阴影一部分，使得阴影出现月亮形状 */
            background-color: transparent;
        }
    </style>
    <div class="box"></div>