Use CSS border to make a triangular formula gift

In order to facilitate the use of border to do the triangle, omit that tedious thinking triangle facing problem, I made a small formula, divided into two, one is the ordinary triangle, one is for the right angle triangle, the formula is as follows:

General article:

Direction toward which side is not,

Color reverse to compensate

Right-angled triangle article:

Right angle triangle split on both sides,

Which side has no value,

Specific colors to fill,

Look at the right angle,

Fill up at right angles,

Down right-angled to fill the bottom,

Top, bottom two friends,

Never want to see this.

The results for the general article are as follows:

The code is as follows:

{                width: 0;                 height: 0;                 border-width: 30px 50px 30px 0;                 border-style: solid;                 border-color: transparent #007AFF transparent transparent;            }

Demo Analysis: Because the direction of the left, so the left value is 0, because the direction of the left, the color is filled on the right, in line with the formula, hey, smell. The others are not explained in detail, directly on the effect, as follows:

The code is as follows:

. ToRight{width:0;Height:0;Border-width:30px 0 30px 50px;Border-style:Solid;Border-color:transparent transparent transparent #007AFF; }. Totop{width:0;Height:0;Border-width:0 30px 50px 30px;Border-style:Solid;Border-color:transparent transparent #007AFF transparent; }. Tobottom{width:0;Height:0;Border-width:30px 30px 0 50px;Border-style:Solid;Border-color:#007AFF Transparent Transparent transparent; }

Right Angle triangle Demo effect:

The code is as follows:

{                width: 0;                 height: 0;                 border-width: 100px 50px 0 0;                 border-style: solid;                 border-color: #0062CC transparent transparent transparent;            }

Demo: The angle of this triangle is on the left, according to the analysis of the formula, which side is no value in which way, the left is no value, correct, color, or because of the position of the right angle, because, right angle in the top, so the position of the color fill in the top, correct, or because the angle of the relationship, because the So bottom no value, never meet, right. Other examples are as follows:

The code is as follows:

. Straightrighttop{width:0;Height:0;Border-width:100px 0 0 50px;Border-style:Solid;Border-color:#0062CC Transparent Transparent transparent; }. Straightleftbottom{width:0;Height:0;Border-width:0 50px 100px 0;Border-style:Solid;Border-color:transparent transparent #0062CC transparent; }. Straightrightbottom{width:0;Height:0;Border-width:0 0 100px 50px;Border-style:Solid;Border-color:transparent transparent #0062CC transparent; }

Before you do not understand the Web site before, thank them: http://www.cnblogs.com/blosaa/p/3823695.html

Reprint please indicate the source, thank you!

Use CSS border to make a triangular formula gift