Basic Skill 1 - Magical Border

Let's draw a rectangle first:

.Rectangle
{
    height: 100px;
    width: 200px;
    background: darkgray;
    border-width: 50px;
    border-style: solid;
    border-top-color: cyan;
    border-bottom-color: blue;
    border-left-color: orange;
    border-right-color: green;
}

Did you find anything? Yes, the junction of the four sides is a 45° angle. So what can we do with this stuff? Look down.

Advanced Skill 1 - Triangle

If we make the left border wider, the right border is set to 0, the upper and lower borders are set to transparent, and the length and width of itself are set to 0, guess what will happen?

.Triangle
{
    height: 0;
    width: 0;
    border-left: 50px solid orange;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

Nice, we got a triangle. Then according to the above ideas, we can adjust the border length of each side to obtain triangles of various shapes and sizes.

Of course, the same is true for trapezoids.

Basic Skill 2 - Magical radius

Come on, let's draw a circle first. What? Don't know how to draw? Look

.Cycle
{
    width: 120px;
    height: 120px;
    background: orange;
    border-radius: 60px;
}

Border-radius allows us to set the left and right radians of the upper and lower sides, then border-radius can be used to draw various rounded shapes, such as ellipses, eggs, etc.

border-radius:2em;

border-radius is the abbreviation of the following four ways of writing

    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;

Basic Skill 3 - The Magical Rotate

Rotate allows us to rotate elements in a certain direction

.NoRotate {
    width: 100px;
    height: 100px;
    background: orange;
    /* transform: rotate(-45deg); */
}
.Rotate
{
    width: 100px;
    height: 100px;
    background: orange;
    transform: rotate(-45deg);
}

Basic Skill 4 - Pseudo-Elements

The :before and :after pseudo-elements are virtual elements that exist before and after the real element. Usually, we can use these two pseudo-elements to achieve certain CSS effects.

For example, um, the red star is shining brightly, a red star?

Good idea, the above graphics can be disassembled into a superposition of 3 triangles, using pseudo-element + Rotate we can superimpose the graphics ingeniously

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(35deg);    
}
  
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    transform: rotate(-35deg); 
}
  
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);     
}

Advanced Skill 2 - Various Irregular Geometries

According to the above basic skills, we now have the skill combination of triangle + circle + rotation + pseudo-element, then basically we can disassemble common irregular graphics into the above graphics for combination. for example:

Hexagons, pentagons, hearts, etc.

The Ultimate Move - Canvas & SVG

Well, full of self-confidence, combined skills in hand, who is afraid of who.

BOSS: So whoever, you draw me a map of China.

Nani? Are you kidding me?

Canvas

Canvas uses JavaScript to draw 2D graphics.

Canvas is rendered pixel by pixel.

In canvas, once the graphic is drawn, it doesn't continue to get the browser's attention. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by graphics.

The sample code is as follows:

var canvas = document.getElementById('test-shape-canvas'),
var ctx = canvas.getContext('2d');
ctx.clearRect( 0, 0, 200, 200); // Erase a rectangle with a size of 200x200 at (0,0), erasing means making the area transparent 
ctx.fillStyle = '#dddddd'; / / Set the color 
ctx.fillRect(10, 10, 130, 130); // Color the rectangle with the size of 130x130 at the (10,10) position 
// Use Path to draw complex paths: 
var path= new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

SVG

SVG is a language for describing 2D graphics using XML.

SVG is based on XML, which means that every element in the SVG DOM is available. You can attach JavaScript event handlers to an element.

In SVG, each drawn graphic is considered an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.

The sample code is as follows:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

  <polygon points="100,10 40,180 190,60 10,60 160,180"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

</svg>

Summarize

In general, with the gradual development of new features of CSS3 and HTML5, the front-end graphics display is often out of the original image mode. Using CSS drawing can reduce the use of images, reduce page size, and speed up loading, especially for mobile The end has a high cost performance.

refers:

http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

https://www.cnblogs.com/liangxiaofeng/p/5936760.html

https://www.liaoxuefeng.com/wiki

CSS irregular graphics drawing