Brainless use CSS to make triangles and advanced applications, don’t say you don’t know how after reading it!

Advanced usage of CSS

• Sometimes we encounter the following requirements in development:
  
• Observing the above picture, we can see that there is a triangle protruding out of the box under the phone JD in the first picture; the red and white in the second picture are divided by a diagonal line, so how do we achieve this effect? After reading this blog, don't say you still can't! ! !

CSS to make triangles

• First of all, the boxes we usually see are like this.
  

• Code:

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    	margin: 100px auto;
    }
  

• What if we widen the border of the box? What if its border width is 50 pixels? It will look like the following.
  

• Code:

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 50px solid red;
    	margin: 100px auto;
    }
  

• What if I change the colors of the four borders to different colors?
  

• Code:

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 50px solid;
    	border-color: red blue green black;
    	margin:  100px auto;
    }
  

• Seeing this, my friends may have ideas, so should I make the width and height of the box smaller? Or is there no width and height?

• Code:

    .box1 {
    	width: 50px;
    	height: 50px;
    	border:  50px solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• Code:

    .box1 {
    	width : 0;
    	height: 0;
    	border: 50px solid;
    	border-color: red blue green black;
    	margin:  100px auto;
    }
  

• Seeing this, doesn't this triangle come out? That's right, set the colors of the other three borders to a transparent color, isn't this triangle authentic?
  

• Code:

    .box1 {
    	width : 0;
    	height: 0;
    	border: 50px solid;
    	border-color: red transparent transparent transparent;
    	margin:  100px auto;
    }
  

to sum up:

• The template of the triangle is as follows:

    .box {
    	width: 0;
    	height: 0;
    	border: 40px solid transparent;
    	border-top-color: red;
    }
  

• Description:

  1. This writing method has the same meaning as the above writing method, but it is more concise and recommended .
  2. The size of the triangle only needs to change the width of the border.
  3. The direction of the triangle needs to be modified to the value of top, optional top, bottom, left, right.
  4. The color can be modified by the value of border-top-color.

• Therefore, the triangle of the protruding box above can be directly positioned to the proper position of the big box by positioning, and the effect of protruding the triangle of the box is realized.

Advanced usage of CSS triangles

• So how do we make this effect?
  

• In fact, it consists of a big box with two small boxes inside (the height of the two small boxes is the same as the big box), and then there is a right-angled triangle absolutely positioned to the right edge of the left box and then set the color to the same color as the right box That's it.
  
  

• Next we analyze how to write the small triangle in the above picture.

• First look at the picture:
  

• Code:

    .box1 {
    	width : 0;
    	height: 0;
    	border-width: 50px;
    	border-style: solid;
    	border-color: red blue green black;
    	margin: 100px auto;
    }
    
    下面的这种写法和上面是等价的
  
    .box1 {
    	width: 0;
    	height: 0;
    	border-width: 50px 50px 50px 50px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin: 100px auto;
    }
  

• We increased the width of the upper border and found the following patterns:
  

• Code:

    .box1 {
    	width: 0;
    	height: 0;
    	border-width:  150px 50px 50px 50px;
    	border-style:  solid;
    	border-color: red blue green black;
    	margin: 100px auto;
    }
  

• Looking at the picture, we can see that the triangle on the right is most likely to become our target triangle, so we reduced the width of the lower border to 0, and found that the pattern we wanted appeared.
  

• Code:

    .box1 {
    	width : 0;
    	height: 0;
    	border-width:  150px 50px 0px 50px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• So we set the width of the left border to 0 pixels, and the triangle becomes more obvious.
  

• Code:

    .box1 {
    	width: 0;
    	height: 0;
    	border-width: 150px 50px Opx 0px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• At this time, you only need to set the color of the red triangle to a transparent color (note that the red triangle is the upper border), and the effect is as follows.
  

• Code:

    .box1 {
    	width: 0;
    	height: 0;
    	border-width:  150px 50px Opx opx;
    	border-style : solid;
    	border-color: transparent blue green black;
    	margin:  100px auto;
    }
  

to sum up:

• The CSS code for the blue triangle is:

    .box1 {
    	width : 0;
    	height: 0;
    	border-width:  150px 50px 0 0;
    	border-style:  solid;
    	border-color: transparent blue transparent transparent;
    }
  

• Description:

  1. The first parameter of border-width sets the height of the triangle, and the second parameter sets the width of the triangle.
  2. The color can be modified to the desired color in border-color.

• Therefore, you only need to position the small triangle absolutely to the right of the left box, modify it to an appropriate size, and change the color to the color of the right box to achieve that requirement.

Tip:
Many compound writing methods are used in the case code. If you are unfamiliar with this, you can read my other blog- Summary of compound writing methods in HTML and CSS