HTML Shield Logo With HTML & CSS

Rendering arrows, triangles, and other easy shapes from HTML divs and CSS borders is a famous way of optimizing web site performance. In this text, I’m presenting how to draw the HTML defend emblem the usage of best HTML and CSS.

The HTML defend is built from 4 separate div elementsright-angled triangles on the perimeters, a rectangle within the middle with the textual content and an isosceles triangle at the lowest.

<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;
}
Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *