Some methods of implementing triangle in CSS

CSS implementation triangle is not so difficult to imagine, as long as understand the border of the various attributes of the meaning is very good to understand how the CSS triangle is implemented.

Here are a few very simple examples:

CSS triangle-shaped production: CSS style:. triangle{width:0;     height:0;     border-left:10px solid Transparent;     border-right:10px solid Transparent; border-top:10px solid red;     } Method Explanation: Define the left and right border transparent, the bottom box is not defined, the top border defines the color can this style is a variant of the above style, just border-left: the width of a larger, code as follows:. triangle{width:0;     height:0;     border-left:30px solid Transparent;     border-right:10px solid Transparent; border-top:10px solid red;     You can also implement the left ARROW or right ARROW, just set the border-top/border-bottom color to transparent, set the color of the right border. triangle{width:0; height:0;
border-top:20px solid Transparent;
border-bottom:20px solid Transparent;
border-right:20px solid Red;} This effect can be achieved by means of a different way: the left color is transparent, the top and right colors are set, and the other color is set below. triangle{
width:0;
height:0;
border-width:14px;
Border-style:solid;
Border-color: #ff1515 #ff1515 #920000 Transparent;
This triangle and the above triangle realization idea is consistent:. triangle{width:0;     height:0;     border-width:10px;     Border-style:solid; border-color:red red transparent transparent;} To achieve this kind of triangle with a border, generally use two tag div or span I and other random tags to overlay, it can be achieved, there is a kind of opportunistic way is as follows: Use 2 symbols to achieve the shape of the triangle <span class= "Z" > </ span> <span class= "y" > </span> basic structure are as follows:
<div class= "x" >
<p><a href= "#" > Use object-oriented thinking to write CSS, using object-oriented mentality to write CSS. </a></p>
<span class= "Z" > </span> <span class= "y" > </span> </div>
. x{width:180px; position:relative; background: #fff; border:1px solid #ccc; padding:10px; left:-4px; top:-4px;} /* Content div*/.y,. z{position:absolute;left:141px;}

. Y{color: #ccc; font-size:19px; top:-12px;z-index:1;} /* Analog Small triangle * *

. Z{color: #fff; font-size:19px;top:-11px; Z-index:3;} /* Simulate a small triangle * * * to display a solid diamond in z above, covering the top of a solid diamond in Y, the triangle border you see, the color of the Y element