A summary of methods for building deformable borders using CSS's border property

Border is the most commonly used to make a variety of P-border CSS properties, here we have organized the use of CSS border properties of the method to build the deformation border summary, the most important is based on some of the Triangle graphics transformation:

Border Basic Review
Border by definition is the meaning of the border, in the CSS, you can use the border syntax to make a variety of design changes, such as setting the width of the border, style, color, etc., can also hide the border, in principle, CSS for border design is not limited to the P block or span Border of a page, such as the border of a page title, the border of a picture (img border) ... And so on, all major browsers support CSS border properties.
Introduction to CSS Border syntax:

border: Border thickness border color border style;

Standard CSS border rules from left to right a total of three parameters, each parameter is separated by a half-shaped space, the first parameter is the thickness of the border (Border-width), the general use of PX, EM and other standard page units, the second parameter marked the color of the border (Border-color), You can use the color standard color code or the English name of the color, the third parameter is the border style (Border-style), you can set the solid line, dashed, double solid line, continuous point ... And so many different styles.
After a brief review, let's go to the following:

First, border frame deformation of the mind
Front-end developers should have some idea of how to achieve triangular effects with pure CSS. But not many people really use this effect in the project, and not everyone is familiar with this pure CSS to create a triangular principle. So today a rough article, to some of the principle is not very proficient friends. The master floated over it! Let's look at how I can achieve the effect of a triangle using pure CSS.

We first look at the above set of graphs, which are two squares, two rectangles, and each shape contains different shapes. It is worth mentioning that these shapes are implemented by pure CSS, and it is gratifying that they are compatible with IE6 ...
Equilateral quadrilateral = = Graphic fit (no evil ideas!!) ):
If you want to ask how this is achieved? In fact, it is relatively simple, but ordinary people seldom pay attention to it. We used to define the border with border, because the reason for the design diagram, mostly the definition of "1-5" Pixels of the graph, and did not conduct in-depth research, such as the Border-left and border-top between the cohesion is what? To know the answer is simple, we just need to increase the value of the border-width, we can see that the cohesion between border is a diagonal line. As shown, the following code is affixed to the above section:

<p style= "width:20px; height:20px; Display:inline-block; border:40px solid #0f0;  Float:left; " ></p>   <p style= "width:20px; height:20px; display:inline-block; margin-left:20px; border-left:40px so Lid #f00; border-top:40px solid #0f0; border-right:40px solid #03f; border-bottom:40px solid #f70;  Float:left; " ></p>   <p style= "width:0px; height:0px; display:inline-block; margin-left:20px; border-left:40px soli D #f00; border-top:40px solid #0f0; border-right:40px solid #03f; border-bottom:40px solid #f70; font-size:0; Float:left; " ></p>   <p style= "width:0px; height:0px; display:inline-block; margin-left:20px; border-left:40px soli D #f00; border-top:40px solid #0f0; border-right:80px solid #03f; border-bottom:40px solid #f70; font-size:0; Float:left; " ></p>

You must be very interested in understanding the deformation principle of the graphic above. Here I parse the code in steps:
First, we study Tuyi's code and find the way we usually define the border: border:40px solid #0f0; So we can get a square with a width of 20 pixels and a 40-pixel border;
Continue, the study of the Code of the two, is also very simple to implement, but to add a color to each border, but we found a startling change, each border and the border is actually produced a slash, and this time produced 4 trapezoidal, smart you will have a sense of the so-called, And at the same time think that if there is no middle blank that does not produce a triangle ...
Yes, as you can imagine, figure three is what's in your head, and we see the code "width:0px; height:0px; " So the blank part is gone, but then you may also need to pay attention to a detail (bold display of the section), "font-size:0", yes is here, in order to compatible with IE6, remove the ie610 pixel height of the bug (need to use line-height:0;). Now that we're done, do you want to tell me that converting the other three border colors into a background color becomes a triangle? Yes, that's the way it is. But don't worry, we're going to study four next.
Only slightly different from the figure three, the width of the right border is increased, becomes 80 pixels, and then you see the generation of 4 non-right-angled triangles, but this is a god horse use? I can say for sure, as long as the intention to think, this is still more fun, because our triangle of the field is no longer confined to the right angle of the ... Oh, you crossing please continue to see
The square becomes a triangular shape:

I try not to complete the entire deformation process of the annotation, but the style and character of the reasons, there is always a place to grind, but also forgive me! Paste the above graphic code:

<p style= "width:0px; height:0px; Display:inline-block; border:40px solid #fff; Border-left-color: #f00; Border-right-color: #03f; font-size:0; Float:left; " ></p>   <p style= "width:0px; height:0px; display:inline-block; margin-left:20px; border:40px Solid #fff ; Border-left-color: #f00; Border-top-color: #0f0; font-size:0; Float:left; " ></p>   <p style= "width:0px; height:0px; display:inline-block; margin-left:20px; border:40px Solid #fff ; Border-bottom-color: #f70; font-size:0; Float:left; " ></p>

Even if you don't look at the code above, you should be aware of how some of the above graphs are obtained. Yes, define a "border:40px solid #fff/* Here is the background color */;" and then define a different color value for the border, if you want to display the following triangle, just define the color for the graphic below.
So simple, some of our common small triangle is through such code to achieve, generally with the absolute positioning (position:absolute;) to use, will achieve the desired effect.

Second, the advanced level of border deformation record
God's horse, it's not over yet. Oh, indeed, I would like to say that through the above section I am afraid that can not achieve the effect of the opening picture. So we can only continue to deepen the research level ... Here is the connotation of the appearance of the chart ...

As a smart front-end developer, you won't be bothered by the above, because I'm not just talking about technology, it's an art. Hey, Ruffian appearances, explain continue ... First put the code ...

<p style= "width:0px; height:0px; Display:inline-block; border:40px solid #fff; Border-left-color: #f00; font-size:0; Float:left; " ></p> <p style= "width:0px; height:0px; Display:inline-block; Margin-left: -70px; border:40px solid #0f0; Border-left-color: #fff; font-size:0; Float:left; " ></p> <p style= "width:0px; height:0px; Display:inline-block; margin-left:20px; border:40px solid #fff; Border-left-color: #f00; font-size:0; Float:left; " ></p> <p style= "width:0px; height:0px; Display:inline-block; Margin-left: -70px; border:40px solid #0f0; Border-left-color:transparent; _border-left-color:snow; _filter:chroma (Color=snow); font-size:0; Float:left; " ></p> <p style= "width:0px; height:0px; Display:inline-block; margin-left:20px; border:40px solid #03f; Border-left-color: #f00; font-size:0; Float:left; " ></p> <p style= "width:0px; height:0px; Display:inline-block; Margin-left: -70px; Border:40px solid #0f0; Border-left-color:transparent; _border-left-color:snow; _filter:chroma (Color=snow); font-size:0; Float:left; " ></p>

I feel that the front-end people play God horse looking for a different kind of game is sure Cow X, after all all day facing the code to adjust the bug, analysis of different types of code in different browser implementation of different effects ... Oh, wordy. You should see a different place.
The effect you want to achieve is that the left block is pressed on the right side of the block to achieve the overall cohesion between the block elements. See here, I know what you're thinking, Z-index? Don't you think it's transparent? That means you've learned the truth about CSS triangles.

Three, border deformation of the step navigation effect (rocket assembly method)
We have seen rockets and rocket-like objects on TV. The technique I'm talking about today is that rocket assembly is very unlikely, and I'm going to talk about a rocket-like assembly to achieve a purely CSS-distributed navigation effect.
We all know the rocket from the bottom of the engine + propeller, the middle fuel tank transmitter, the head is a satellite fairing and so on ... That's probably the case. OK, look at the structure below me.

After seeing the diagram above you should know that you should do God horse, we only need to give the middle block a fixed value, then the left and right sides of the shape of the block relative to the middle of absolute positioning on it. Now that you know the principle, start acting.

<style type= "Text/css" > #step {margin:50px;font-size:16px;color: #fff; letter-spacing:0.5em;} #step a{width:100px;height:30px;background: #9BBB38; text-align:center;display:inline-block;line-height:30px;   position:relative;margin-right:20px;} #step a s{width:0px;height:0px;border:15px solid #9BBB38; border-left-color:transparent; _border-left-color:snow; _   Filter:chroma (color=snow); font-size:0;line-height:0;position:absolute;left:-30px;top:0px;} #step a b{width:0px;height:0px;border:15px solid #fff; Border-left-color: #9BBB38; font-size:0;line-height:0;position   : absolute;top:0px;rightright:-30px;}   #step. First{border-left-color: #9BBB38} #step. Last{border-color: #9BBB38; rightright:-15px;}   #step. On{background: #E58712;} #step. on s{border:15px solid #E58712; border-left-color:transparent; _border-left-color:snow; _filter:chroma (color=   Snow);}   #step. On b{border-left-color: #E58712;} </style> <p id= "Step" > <a><s class= "First" ></s> registration <b&Gt;</b></a> <a class= "on" ><s></s> login <b></b></a> <a><s> </s> order <b></b></a> <a><s></s> payment <b class= "last" ></b></a > </p>

If you see here you are still asking how to achieve the Balabala of God horse ... Then I can only tell you: if I beg, I will not tell you. You only have to practice, and master the knowledge can be their own, so you have to refer to the above code to write an effect, you absolutely do not empty this overview.

Four, Border metamorphosis of the Metamorphosis version
Every technician is in the pursuit of a higher level of technology, deeper. So when you think that a technical point is over, perhaps what you've learned before is just the beginning. The key is whether you can use what you know to explore and create. Below a simple border metamorphosis, the technical content is very low, the idea is still possible. Welcome to the heavy taste!

<style type= "Text/css" > #arr {position:relative;margin-top:100px;   margin-left:100px;} #arr a{width:0px;height:0px;border-width:50px 75px;border-style:solid;border-color:transparent;_border-color: Snow   _filter:chroma (Color=snow); Border-left-color: #000;p osition:absolute;left:200px;top:0px;line-height:0;} #arr S{width:0px;height:0px;border-color:transparent;_border-color:snow; _filter:chroma (Color=snow); Border-left-color: #fff; border-width:50px 20px;border-style:solid;position:absolute;top:0px;left:200px;   line-height:0;}   #arr b{width:150px;height:20px;background: #000;d isplay:block;position:absolute;left:70px;top:40px;} </style> <p id= "arr" > <a></a> <s></s> <b></b> </p>