CSS Inspired HTML Diya

Today i am very happy to introduce you to Diya. Diya is Earthen lamp made with Clay and Pot used in India to lighten up the House. But i am going to make it with more eco-friendly, just using 'HTML & CSS'.

Lets first know about Diya. Diya is used to lighten up the homes and in decoration at Deepawali (Diwali). Diya Base is made with clay or some other earthen material and some oil is used as fuel. Oil is poured into Diya and then string of cotton is put into it and ignited using sparks from matchsticks.

Here in our Eco-friendly Diya we have used HTML. For base of Diya we have .shape and .bati for showing string structure. Flame is made with .loe using Radial Gradient.
.main-div is used proper positioning of all structures.

Here is HTML for Diya

<div class="main-div">
    <div class="loe"></div>
    <div class="bati"></div>
    <div class="semci"></div>
    <div class="shape"></div>
</div>
Don't forgot to Reset your browser CSS before use.

And CSS for Our Eco-friendly Diya

.main-div{
padding-left:33%;
}
.main-div div{
position:relative;
display:block;
}
.shape{
width: 50px;
height:50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #662f05;
top:-11px;
z-index:10;
}
.semci{
width:147px;
height:25px;
background:-webkit-radial-gradient(#eceaed,#662f05);
background:-moz-radial-gradient(#eceaed,#662f05);
background:-o-radial-gradient(#eceaed,#662f05);
background:radial-gradient(#eceaed,#662f05);
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 33px;
border:2px solid #662f05;
z-index:11;
}
.bati{
width: 0;
height: 0;
border-top: 10px solid #fff;
border-right: 3px solid transparent;
bottom:-26px;
left:75px;
z-index:12;
}
.loe{
width:20px;
height:110px;
background:-webkit-radial-gradient(#fcf9fc 10%,#f0dd0c,#e3ab03,#e3ab03);
background:-moz-radial-gradient(#fcf9fc 10%,#f0dd0c,#e3ab03,#e3ab03);
background:-o-radial-gradient(#fcf9fc 10%,#f0dd0c,#e3ab03,#e3ab03);
background:radial-gradient(#fcf9fc 10%,#f0dd0c,#e3ab03,#e3ab03);
border-radius:50%;
border:2px solid #e3ab03;
bottom:-28px;
left:65px;
z-index:13;
}
Here Gradient is used which makes it browser dependent. So for better visualisation try it on Latest versions of Google Chrome and Mozilla Firefox.

How did I get Inspired to design CSS Diya