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

Source: Internet
Author: User
Tags border color

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.