Web Front End Interview Guide (18): What is the principle of creating a triangle with pure CSS?

Topic Reviews

The triangle icon in the Web page design is very common, belongs to the basic common sense question, as long as in the practice has done this function can answer, can put the thought that you have done to describe can, the difficulty degree of the topic is simple

Key Questions

1. The principle of averaging is used

The box is a rectangle or a square, from the center of the shape, to the 4 corners about 4 divisions

2. Implementation of the Code

The first step is to ensure that elements are block-level elements

The second step sets the border of the element

The third step does not need to display the border using transparent color

Sample Code

[CSS]View Plain Copy

1. . square{  
2.      width: 0;  
3.      height:0;  
4.      margin:0 < Span class= "value" >AUTO;&NBSP;&NBSP;
5.      < span class= "keyword" >border:6px solid  transparent;  
6.       border-top: 6px solid  RED;&NBSP;&NBSP;
7. &NBSP;}&NBSP;&NBSP;

Add sub-item

Describe your experience: in development we also often design a triangle effect with a notch, as shown in.

The effect of the practice is this:

1., two triangles (bottom border) The position, size to be consistent

2, the inside of the triangle of the bottom border color is black (can also be other colors), outside the triangle border color white background

3, the white triangle to cover the black triangle can form such a shape, about the problem of coverage can use the location of the label or Z-index to change.

HTML code

[HTML]View PlainCopy

1. <div class="box B1"></div>
2. <div class="box B2"></div>

CSS Code

[CSS]View PlainCopy

2. . box{
4. position: absolute;
6. Left: 0;
8. Top: 0;
10. width: 0;
12. height:0;
14. border: 6px solid transparent;
16. }
18. . b1{
20. Border-bottom-color:#000;
22. }
24. . b2{
26. Border-bottom-color:#fff;
28. }

Thank:

Thanks to netizens, qq_35104381, a very constructive question: why do the white elements cover the black elements to form such a gap when the same position and size elements are present? Supposedly, it should be white full-covered black!

I think this question is really interesting, at present I think this is H5 clever place, should be the browser rendering rules! After all, the following versions of IE9 are not supported. If you have a better explanation welcome message, Mutual Exchange learn some!

Web Front End Interview Guide (18): What is the principle of creating a triangle with pure CSS?