css triangle implementation

CSS is an integral part of front-end development. Whether it is typesetting, layout or style design, CSS is required. In style design, we often need to use graphics of various shapes, including rectangles, circles, triangles, etc. Achieving triangle shapes is a relatively niche technology in CSS. Today we will discuss how to use CSS to realize triangle shapes.

1. Use the border attribute to implement triangles

The border attribute of CSS allows us to define the border of a box. We can use the characteristics of this attribute to achieve a triangle shape. The specific implementation method is as follows:

.triangle {
  width: 0;
  height: 0;
  border-width: 20px 20px 0 20px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

First, we define a box with a width and height of 0. This box is our triangle. Then, we defined the border-width property, setting the bottom border of the triangle to a width of 20px, the left and right borders to a width of 20px, and the top border to 0. In this way, we get an isosceles triangle with a lower side length of 40px and a height of 20px. Next, we set the border color to black and the upper border color to transparent, thus completing a simple triangle.

2. Use pseudo-classes to implement triangles

The triangle implemented by the above method is relatively simple, but only an isosceles triangle can be obtained. If we want to implement other forms of triangles, or need to add text or icons on them, we need to use pseudo classes.

We can use ::before and ::after to extend the pseudo-class selector of an element. Through these two pseudo-class selectors, we can generate new elements inside an element and set styles on the new elements.

We can use ::before or ::after to generate a triangle and define the triangle shape by setting the width, height and border properties. At the same time, we can also set the contrast of the border color and container color to achieve different styles of triangles.

.triangle {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #000;
}

.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}

In the above code, we first define a container with a width and height of 40px and a background color of black. Next, we use the ::before pseudo-class to generate a triangle, set the upper border of the triangle to white, and set the right border, left border and bottom border to transparent. The positioning of the triangle is achieved by setting bottom and left.

3. Use the clip-path attribute to implement triangles

In CSS3, we can also use the clip-path attribute to implement triangle shapes. The clip-path attribute can define the clipping area of ​​an element and clip the display area of ​​the element according to the defined path to achieve different shapes.

We can use the polygon() function to define a polygon. This function accepts an indefinite number of parameters. Each parameter is a coordinate value. The coordinate value can be a length unit such as px, em, rem, or a percentage.

.triangle {
  width: 0;
  height: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #000;
}

In the above code, we first define a box with a width and height of 0, and then use the clip-path attribute to clip the box into a triangle. In the polygon() function, we define the coordinates of three points, and the lines connecting these three points are the three sides of the triangle. The coordinates of the three points are (50% 0%), (0% 100%) and (100% 100%), which represent the vertex and the bottom two corners of the triangle.

Since the current compatibility of the clip-path attribute is not very good, if you need to use this attribute in a lower version of the browser, you can use SVG graphics instead.

The above three methods can be used to realize the triangle shape. Which method to choose depends on the actual needs. In actual development, we can combine various attributes and methods to achieve more complex triangle styles.

The above is the detailed content of css triangle implementation. For more information, please follow other related articles on the PHP Chinese website!