Many of us want to add cool features to our websites to make our websites user friendly ad more attractive. Especially in Web2.0 era. Today we are talking about adding speech balloon feature to our webpage so that we can display beautiful help windows while users mouse over some help icons on our page.First, let me introduce one post written by Umar Ashfaq named "How to create a speech balloon with pure CSS". He also explains how this works. You can also refer Magic CSS shape for more information. This is a brilliant idea. He uses the border property to construct the triangle without using any...

There is a question on StackOverflow which states that someone finds a CSS sample on http://css-tricks.com/examples/ShapesOfCSS/  , the sample shows a triangle created with pure CSS. The source code is :#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}The question is how these few lines can create a triangle? Next we give the answer and the detail illustration to this question We need to consider the Box Model of HTML, here we see content and padding as content and we ignore margin, then the box model...