Use css3 to implement the five-pointed star style in the web page (principle analysis)

The content of this article is about using css3 to implement the five-pointed star style in web pages. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The various graphics we usually see in web pages include squares, rectangles, triangles, circles, etc. Most of them are implemented using css3 or background images. However, during the development process, the background is used There are many shortcomings in image interception. For example, images require additional requests and have higher requirements on image pixels. Therefore, CSS3 has become a more mainstream implementation method. Now we will show you the usage of pseudo elements and transform by drawing a five-pointed star.

The principle of using css3 to implement the five-pointed star style

We first use elements with large-size edges and zero content size to implement A triangle style (for details, please pay attention to Use css3 to implement various triangle style collections in web pages), then use pseudo elements: after and :before to clone 2 triangles of the same size, and finally use these 2 pseudo elements Different rotation transformations are applied to the elements to achieve the style of the five-pointed star.

css3 pseudo-element

The main purpose of CSS is to add styles to HTML elements. In fact, there is a feature in CSS that allows us to Adding extra elements without disturbing the document itself is called a pseudo-element. At first, the syntax of pseudo-elements was ":", but after the revision of CSS3, "::" was used uniformly to distinguish pseudo-elements and pseudo-classes (such as :hover, :active, etc.). This article will refer to two pseudo-elements: before and :after. :before will add an element before the content and :after will add an element after the content (to add content between them we can use the content attribute).

css3’s new property transform

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element. This article will use transform to rotate the two cloned triangles in different directions.

The steps to implement the five-pointed star style using css3 and the implementation code

Step 1: Create a triangle

.tri {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

Step 2: We use pseudo elements: after and :before to clone 2 triangles of the same size

.tri:after,.tri:before {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid red;
}

Step 3: Split the above 2 pseudo elements respectively Perform 70° rotation transformation in different directions

.tri:before {
    transform: rotate(70deg);
}
.tri:after {
    transform: rotate(-70deg);
}

Use css3 to achieve the five-pointed star style effect as shown in the picture

The above is the detailed content of Use css3 to implement the five-pointed star style in the web page (principle analysis). For more information, please follow other related articles on the PHP Chinese website!