Css3 makes triangle icon

In the process of building a website, sometimes it is necessary to add decorative effects to some containers, so that small icons will be added. Today I will share with you the use of Css3 to make triangle icons.

Before Css3, we used the transparent property to make the background color transparent, and in CSS3 we used the opacity property to make the background color transparent.

Points to note:

1. First, you must set the width and height of the container box to 0px;

2. Here is to use opacity in rgba color to control the color transparency, set the transparency after rgba three colors, the last 0.0 of rgba(0,0,0,0.0) is to set the color transparency, which is the opacity property, the value range is from 0.0 To 1, when set to 0.0, it is completely transparent.

The following is the html code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3实现三角形</title>
    <style>
          .triangle{
              width: 0;
              height: 0;
              border-bottom: 30px solid rgba(0,0,0);
              border-left:30px solid rgba(255,0,0);
              border-right:30px solid rgba(84,255,159);
              border-top:30px solid rgba(0,191,255);
          }
    </style>
</head>
<body>
    <div class="triangle">
    </div>
</body>
</html>

First, set the borders of the four directions to 30px, display solid lines, and add different colors to the four sides. If you need to display that side, set the transparency of the other three sides to 0.0 to display the triangle in that direction.

          .triangle{
              width: 0;
              height: 0;
              border-bottom: 30px solid rgba(0,0,0,0.0);
              border-left:30px solid rgba(255,0,0,0.0);
              border-right:30px solid rgba(84,255,159,0.0);
              border-top:30px solid rgba(0,191,255);
          }

After modifying the CSS, the triangle at the top is displayed, which is a downward facing triangle.

In addition, we can streamline the code in the CSS, uniformly set the border to a constant color, and set the color transparency to 0.0, and finally set the triangle in which direction is needed and then reset the properties of that direction.

          .triangle{
              width: 0;
              height: 0;
              border: 30px solid rgba(0,191,255,0.0);
              border-top:30px solid rgba(0,191,255,1);
              /*border-bottom: 30px solid rgba(0,0,0,0.0);*/
              /*border-left:30px solid rgba(255,0,0,0.0);*/
              /*border-right:30px solid rgba(84,255,159,0.0);*/
              /*border-top:30px solid rgba(0,191,255);*/
          }

The final display effect is the same as the effect of setting the four borders.

In addition, you can use the transparent property to make the background color transparent to make triangles.

Css3 makes triangle icon

Guess you like