About the production of html-Triangle

Because I recently saw someone else write a good style, so I want to implement, but the use of a triangle, so a little research.

The effect is this:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/86/B3/wKiom1fH3XKiCncXAAAIA7DN8hU876.png "title=" Triangle.png "alt=" Wkiom1fh3xkicncxaaaia7dn8hu876.png "/>

Note is the bottom of the light triangle, feel the effect of the bookmark has wood. Look at a very layered sense.

The next step is to implement, using the border attribute.

Here the main words are border-top, Border-left, Border-right, Border-bottom can be found in the CSS Manual (http://css.doyoe.com/)

Let's write a blank, and I'll write down a few attributes.

Code

. triangle{width:0;height:0;border-top:10px solid #000, border-left:10px solid #000, border-right:10px solid #000; border-bottom:10px solid #000;}

Then the result is a small black block on the screen that gets a square.

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/86/B3/wKioL1fH4EOBTxGaAAAFGTM7jcQ726.png "title=" Black square. png "alt=" Wkiol1fh4eobtxgaaaafgtm7jcq726.png "/>

Next is the implementation of the triangle, the need to use the transparent parameter, this parameter is to make the color transparent.

Code

. triangle{width:0;height:0;border-top:10px solid #000, border-left:10px solid #000, border-right:10px solid #000; border-bottom:10px solid Transparent;}

Effect: (Is there a feeling of bookmarks?) Here you can change the value of top, add length! ）

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/86/B3/wKioL1fH4mHRiIbTAABqSfF5OSc868.png "title=" Transparent triangle. png "alt=" Wkiol1fh4mhriibtaabqsff5osc868.png "/>

What we need now is to add a transparent to the left, but notice that the top and right changes affect the size of the triangle, for example, if we remove one, we can see the effect.

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/86/B3/wKiom1fH5BCiSh_gAABEe-GbM_A462.png "style=" float: none; "title=" right triangle -1.png "alt=" Wkiom1fh5bcish_gaabee-gbm_a462.png "/>

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/86/B3/wKioL1fH5BCh8IW1AABFOy436uk317.png "style=" float: none; "title=" has triangular -2.png "alt=" Wkiol1fh5bch8iw1aabfoy436uk317.png "/>

Effect as above. This time with others the effect is basically similar, now only need to change the color to be able to. (#7195B7)

Then we go back to the beginning of the demo, so the effect, it must be used to position positioning, and then set it down below! Think about it, if we write a div tag again,

<div class= "One" > Log <div class= "triangle" > </div></div>

If the effect is interesting, you can try it.

There is also the use of:: After; then write the positioning inside

one::after{content: "";    width:0;        height:0;    border-top:10px solid #000;    border-left:10px solid #000;    border-right:10px solid #000; border-bottom:10px solid Transparent;}

<div class= "One" > Log </div>

When I'm finished, put it back!

About the production of html-Triangle