HTML Shield Logo – Drawing With HTML&CSS – No Image

Rendering arrows, triangles and other simple shapes from HTML divs and CSS borders is a popular way of optimizing website performance. In this article I’m presenting how to draw the HTML shield logo using only HTML and CSS.

See the drawing and adjust it in this JSFiddle.

The HTML shield is built from 4 separate div elements: two right-angled triangles on the sides, a rectangle in the middle with the text and an isosceles triangle at the bottom.

<a class="pajzs" href="/html/code/">
    <span class="Pajzs">
        <span class="PajzsLeft">
        </span>
        <span class="PajzsMiddle">
            HTML
        </span>
        <span class="PajzsRight">
        </span>
        <span class="PajzsBottom">
        </span>
    </span>
</a>

The CSS Code is using alternations of big transparent and colored borders to create the illusion of the triangles:

a.pajzs {
    width: 350px;
    font-family: Impact,Charcoal,sans-serif;
    height: 350px;
    display: block;
}
a.pajzs span{
    display: block;
}
.PajzsLeft {
    float: left;
    width: 0;
    border-left: 50px solid transparent;
    border-top: 300px solid #CE5937;
}
.PajzsMiddle {
    float: left;
    width: 250px;
    height: 230px;
    background-color: #CE5937;
    color: #FFF;
    text-align: center;
    padding-top: 70px;
    font-size: 80px;
}
.PajzsRight {
    float: left;
    width: 0;
    border-right: 50px solid transparent;
    border-top: 300px solid #CE5937;
}
.PajzsBottom {
    width: 0;
    height: 0;
    border-left: 125px solid transparent;
    border-right: 125px solid transparent;
    border-top: 50px solid #CE5937;
    clear: both;
    margin-left: 50px;
}