How to draw a triangle with CSS + How to draw the moon with CSS

 1. CSS drawing triangle

Just use the border attribute.

The principle is as follows:

Set the width and height of an element to 0,

            width: 0px;
            height: 0px;

Then set the same style and transparent color for the 4-direction borders of the element:

            border: 100px solid transparent;

Then just change the color of that side to be transparent if you want it to form a triangle.

            border-right-color:blue ;

The principle diagram is as follows: 

Analysis: So it will be divided like this

 

 eg：

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

The code can also be written like this: 

    <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. Draw the moon with CSS

Mainly used: box-shadow box shadow, boder-radius element rounded border,

background-color:transparent element background is set to be transparent.

    <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>