Still chopping up the small triangles? Write a simple triangle using pure CSS

Students, when the artwork gives the design diagram is this:

or this:

My heart is in fact the refusal of the-_-, but the work has to do, most of the alumni write

<style>. Icon{width:20px;Height:20px;Display:Block;margin:0 Auto;background:URL (...)}</style><Divclass= "Con">        <Divclass= "icon"></Div>        <span>Add Accountant</span></Div>

or crisp.

<style>. Icon img{...}</style><Divclass= "Con">        <Divclass= "icon"><imgsrc="..."></Div>        <span>Add Accountant</span></Div>

This is to solve the problem, but in order to this small sharp point, we also have to go to a lot of trouble to cut (very few students can enjoy the artwork to make the sprite picture), if the design is not layered or design software are not familiar words is very depressed ...

In fact, there is a simple way to handle this small sharp tip, we look at:

　　

<style>. Con2{Height:50px;Line-height:50px;text-align:Center;background:#ccecec;position:relative;}. Con2 I{Border:10px Solid #ccecec;Border-color:transparent transparent #ccecec transparent;position:Absolute;Top:-20px; Left:139px; }</style><Divclass= "Con">        <I></I>        <span>Add Accountant</span></Div>

This involves the problem of border, if the width of an element is set to 0,border-width but is greater than 0, the result is a square (each side will become an equilateral right triangle), if you set Border-color to a different four colors on the lower right, As a result, a square of four equilateral triangle will appear!

<style>. Test{width:0;Border:50px Solid;Border-color:#333 #ff0000 #ccecec #999}</style><Divclass= "Test"></Div>

It is not difficult to think that if the color of a certain three sides is set to transparent, we can get an arbitrary color of the triangle.

<style>. Test{width:0;Border:50px Solid;Border-color:transparent transparent #ccecec transparent}</style><Divclass= "Test"></Div>

Then we have this element, such as the <i> tag, set positioning as relative positioning, adjust its top and left values, you can easily get a CSS to write a small sharp tip.

As for the sharp point with the border, I give you the idea: put a similar element in the triangle implemented above, we call it a sub-triangle, the border-color of the parent triangle is set to the border color of the following Div, the border-color of the sub-triangle is set to the background color of the DIV, Sub-triangle positioning (pay attention to adjust the sub-triangle position, so that it just reveals the parent triangle 1px edge), and then adjust the location of the parent triangle, OK!

If you know the brother station is to see a play, not very skilled students can do more practice. I hope you will criticize me more.

Still chopping up the small triangles? Write a simple triangle using pure CSS