StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied! <p>Here's an explanation to answer your first question (I'll leave the actual CSS to others as I'm lazy — please upvote their answers which you think deserve the votes!):</p> <blockquote> <p>This creates a little arrow/triangle-like effect, a "tooltip tail". This blows my mind! <strong>I'm really interested in knowing how this works?!</strong></p> </blockquote> <ol> <li><p>When rendering a border with varying edge colors but the same style (in your case, <code>solid</code>), the seam dividing each pair of adjacent corners is a diagonal line. It's quite similar to what <a href="http://www.w3.org/TR/css3-background/#border-style" rel="noreferrer">the diagram here</a> depicts of the <code>groove</code>, <code>ridge</code>, <code>inset</code> and <code>outset</code> border styles.</p> <p>Note that while all browsers behave the same way and have done so for as long as I can remember, this behavior is not fully defined in either the CSS2.1 spec or the CSS Backgrounds and Borders module. The latter has a section describing <a href="http://www.w3.org/TR/css3-background/#corner-transitions" rel="noreferrer">color and style transitions at corners</a>, and the description seems to imply that for borders with zero corner radii, the line that is rendered is in fact a line that joins the corner of the padding edge with the corner of the border edge (resulting in a 45-degree angled line for equal-width borders), but the spec still cautions that this may not always be the case (especially since it does not even account for borders with zero corner radii explicitly).<sup>1</sup></p></li> <li><p>By the <a href="http://www.w3.org/TR/CSS21/box.html" rel="noreferrer">content (original W3C) box model</a>, a 40x40 area is created out of the 20-pixel borders, with the content dimensions being defined as 0x0.</p></li> <li><p>Dividing a square with diagonal lines joining its four corners results in four right triangles whose right angles meet at the square's midpoint (see below).</p></li> <li><p>The top, bottom and left borders are white to match the background of the <code>.tooltiptail</code> element's container, while the right border is a shade of blue to match the background color of the tooltip:</p> <pre class="lang-css prettyprint-override"><code>border-color: #ffffff #a0c7ff #ffffff #ffffff; </code></pre></li> </ol> <p>The result is this, with the borders labeled, and the border boundaries added using my trusty Line Tool:</p> <p><img src="https://i.stack.imgur.com/YlXEE.png" alt=""></p> <p>Reorienting the tooltip tail is simply a matter of switching the tooltip color around. For example, this would yield a tail that's attached to the bottom of a tip:</p> <pre class="lang-css prettyprint-override"><code>border-color: #a0c7ff #ffffff #ffffff #ffffff; </code></pre> <p><img src="https://i.stack.imgur.com/k3DGb.png" alt=""></p> <p><a href="http://jsfiddle.net/BoltClock/duZAx/8" rel="noreferrer">jsFiddle preview</a></p> <hr> <p><sup>1</sup> <sub>If you're a stickler for standards compliance, you may as well consider all this a hack.</sub></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload