CSS Triangle Arrow DIVs tooltilps

来自：http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

An subtle characteristic of CSS that's been exploited to do something interesting is CSS borders and using it to create pure CSS triangles. These triangles have the advantage of being extremely lightweight (no image used) and scalable to boot. The technique works using the fact that the 4 CSS borders of an element meet at an angle; when the dimensions of the element is set to 0, the 4 borders collapse and touch one another, creating the appearance of 4 triangles。

当元素的尺寸为0（width：0；height:0) 时，4个border折叠在一起，生成了4个小三角型。

Here's the CSS used to create the above DIV:

Style:

#triangles{
margin:3em; //可以不要
0; /*set dimensions of DIV to 0 so its borders collapse and touch one 
another*/
height:0;
border-color: red blue green yellow; /*top, right, bottom, and left border*/
border-style: solid;
border- 50px; /*width of each border*/
}

border-就是小三角形的高度。

<div id="triangles"></div>

To display just a specific triangle then, you would set the border-color of all but the desired border side to transparent.

The following adds a CSS based triangle to a DIV to produce a speech bubble look that can be used to show comments, quotes etc. Each arrow is added to the DIV with no markup used by way of CSS Generated Content. The result are regular DIVs injected with progressive CSS enhancements that degrade well in less capable browsers.

Demo:

 

<div class="uparrowdiv">
This is a test
</div>

.uparrowdiv{
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;  
border-radius:5px;
margin-bottom:2em;
}

.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x *2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;

}

其实第一个样式表目的就是创建长方形的黑色背景的框。

第二个样式表就是创建长方形上面的小三角形。我们使用:after创建了一个内容为空的元素。

然后设置显示为block（为了设置0 height:0为0，只有block可以设置width height)，position为absolute第一个样式表设置为relative就是为了是小三角形在长方形定位）。我们设置了小三角形的维度为0.

关键是设置top:-20 为border-width 的2部，使小三角上移到div的上面。