a box with a *pointer* with just CSS?

How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site wit开发者_如何学Pythonh images disabled in Chrome)

Here is a simple very efficient way of doing it.

Fiddle

UPDATE:

Here is an example:

the html

<div>
    <span class='tip'></span>
</div>

the css

div { 
    height: 30px;
    width:50px;
}
.tip {
    display:block;
    width:1px;
    heigth:20px;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
    border-top: 25px solid #F00;
}

There is something similar I took from the jQuery Ketchup plugin. The CSS looks like this:

.box span {
    border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
    border-left: 0 solid transparent;
    border-right: 15px solid transparent;
    border-style: solid solid none;
    border-width: 10px 15px 0 0;
    display: block;
    height: 0;
    margin-left: 10px;
    width: 0;
}

.box ul {
    background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
    border-radius: 5px 5px 5px 5px;
    color: #111111;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
    line-height: 16px;
    list-style: none outside none;
    margin: 0;
    padding: 10px;
    text-align: left;
}

The according HTML:

<div class="box">
    <ul>
        <li>Content</li>
    </ul>
    <span></span>
</div>

Also have a look at the JSFiddle.

The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:

      top
     _____
left| / \ |right
    |/___\|
     bottom

The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.

Working example: http://jsfiddle.net/NnGyv/

Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.

Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.

If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.

The original site may be using HTML5.

HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).

jsFiddle example. You can find out more information from Dive into HTML5.