CSS3 Small Triangles

Is the project gets the picture, the code is as follows

1 <  class= "Welcome">2<span> admin : 8888</span>3 Your login time is: 2015/3/17 21:31:394  </div>

The code is very simple and straightforward, which is a display of login information.

The small triangle in front is made of CSS3. The CSS code is as follows:

1 Div.welcome:before{2 content:"";3 Border-width:10px 0 10px 20px;4 Border-style:Solid;5 Border-color:transparent transparent transparent #00BB9C;6 Height:0;7 width:0;8 Display:Block;9 position:Absolute;Ten  Left:-30px; One Top:0; A}

Here to explain the meaning of the code, content can contain a space of 16 binary code such as: content: "\00A0";

The role of content here is to occupy a position.

The Border-width property controls the width and height of the triangle, noting that the width on the right side is 0. Unit default omitted, can cast lazy.

Content has been small can not be smaller, and the border is very large, so that there is almost the effect. PS: Picture is a little exaggerated

The width of the right border here is 0 and the purple part is removed:

And because the upper and lower border width is 1/2 of the left box, that is, the upper and lower borders add up to the left border width.

So a triangle with a height equal to the width will come out.

And then set the color of the upper and lower borders to transparent transparent, hiding the upper and lower borders

As for the positioning of what everyone knows, we will not say.

CSS3 Small Triangles