Question

How can you make shapes using a single HTML element? Any CSS technique can be used as long as it’s supported in at least one browser.

Examples of shapes would be a round shape, a triangle, six-angled and so on.

Answer 1

I have made this fiddle with some pure html/css shapes:
– 2 triangles using a span border
– a circle with the help of border-radius

Disclaimer: I was inspired from the old google application/menu bar.

Source:

html

An CSS triangle pointing down:
<span class="delta_down"></span><br>
An CSS triangle pointing up:
<span class="delta_up"></span><br>
Circle:
<span class="circle"></span>

css

span.delta_down {
        border-color: #C0C0C0 transparent transparent;
        border-style: solid dashed dashed;
        border-width: 5px 5px 0;
        display: inline-block;
        font-size: 0;
        height: 0;
        line-height: 0;
        padding-top: 1px;
        position: relative;
        top: -1px;
        width: 0;
}

span.delta_up {
        border-color: transparent transparent #C0C0C0;
        border-style: dashed dashed solid;
        border-width: 0 5px 5px;
        display: inline-block;
        font-size: 0;
        height: 0;
        line-height: 0;
        padding-top: 1px;
        position: relative;
        top: -1px;
        width: 0;
}

span.circle {
        border-radius: 50%;
        width: 10px;
        height: 10px;
        display: inline-block;
        background-color: #C0C0C0;
}