This article focuses on the use of the border attribute to make different geometric shapes for a more beautiful visual style.

What do we need to know before we start?

Preliminary knowledge

Border related attributes

  • Border-width Specifies the width of the border

  • Border-style Specifies the style of the border

  • Border-color Specifies the border color

After the preparation knowledge is mastered

Let’s look at a few practical examples

The case for

For simplicity, the demo uses the simplest DOM elements and CSS attributes

1.

The important point in the figure above is how does the hypotenuse come about?

The code:

Key style sections

It’s pretty easy to do the hypotenuse

2.

The difficulty in the figure above is the small triangle at the head and the large triangle at the bottom

The code:

Key style sections

The demo is finished

So how did it get there?

The principle of analytic

Why can the border property change different geometries

Take a look at the following pattern

Shapes produced by the above styles

We can change the width, height, and color of each line by border-width border-color. Any combination can form different geometric shapes made up of triangles.

Let’s get started.