comments 6

Pakistani flag with CSS3 only

This is the Pakistani flag created with CSS3 only.

HTML

<div id="Pakistan-flag">
    <div id="minorities-representation"></div>
    <div id="the-green-land">
        <div id="crescent-moon">
            <div class="circle-white"></div>
            <div class="circle-green"></div>
        </div>
        <div id="star"></div>
    </div>
</div>

CSS

#Pakistan-flag {
    position: relative;
    width: 360px;
    height: 240px;
}
#minorities-representation {
    width: 89px;
    height: 240px;
    background: #fff;
    float: left;
}
#the-green-land {
    width: 269px;
    height: 240px;
    float: right;
    background: #0D4826;
}
#crescent-moon {
    margin: 25px 0 0 60px;
    position: relative;
    -ms-transform: rotate(-40deg); /* IE 9 */
    -webkit-transform: rotate(-40deg); /* Chrome, Safari */ 
    -o-transform: rotate(-40deg);
    transform: rotate(-40deg);
}
.circle-white {
    background: #fff;
    border-radius: 100px;
    height: 145px;
    width: 145px;
}
.circle-green {
    background: #0D4826;
    border-radius: 100px;
    height: 145px;
    left: 24px;
    position: absolute;
    top: 0;
    width: 180px;
    z-index: 999;
}
#star:before {
    content: "\2605";
    color: #fff;
    font-size: 4em;
    left: 228px;
    position: absolute;
    top: 50px;
    -ms-transform: rotate(50deg); /* IE 9 */
    -webkit-transform: rotate(50deg); /* Chrome, Safari */ 
    -o-transform: rotate(50deg);
    transform: rotate(50deg);
}

Fiddle

  • Pakistan Zindabad 🙂

  • InternetSavage

    Wow, very creative use of CSS.

    • Aamir Shahzad

      Thanks brother

  • vansh Rai

    Good Job Brother.. I have created Indian Flag ..Check this out

    http://jsfiddle.net/Vanshaj/8vcw8j0v/embedded/result/

    • Aamir Shahzad

      Thanks @Vansh
      I did checked your fiddle, its a good work but you have use svg. Indian flag is difficult to implement (the center rounded thing) via CSS but its still achievable. I will give a try to it sometime & will share it with you.

  • vansh Rai

    Sure Bro..!!