کد html :
<div class="main-container">
<div class="container">
<div class="full-circle"></div>
<div class="inner-full-circle"></div>
<div class="line top"></div>
<div class="line left"></div>
<div class="line right"></div>
<div class="top-circle medium-circle"></div>
<div class="left-circle medium-circle"></div>
<div class="right-circle medium-circle"></div>
<div class="main-top-circle small-circle"></div>
<div class="main-left-circle small-circle"></div>
<div class="main-right-circle small-circle"></div>
</div>
</div>
کد css :
.main-container {
width: 250px;
height: 250px;
-moz-border-radius: 125px;
-webkit-border-radius: 125px;
-o-border-radius: 125px;
-ms-border-radius: 125px;
border-radius: 125px;
background-color: #dd4814;
margin: 20px auto;
}
.container {
-moz-transform: translate(50px,50px);
-webkit-transform: translate(50px,50px);
-o-transform: translate(50px,50px);
-ms-transform: translate(50px,50px);
transform: translate(50px,50px);
}
.full-circle {
background-color: #FFFFFF;
height: 150px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
-o-border-radius: 75px;
-ms-border-radius: 75px;
border-radius: 75px;
width: 150px;
}
.inner-full-circle {
background-color: #dd4814;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
width: 100px;
-moz-transform: translate(25px,-125px);
-webkit-transform: translate(25px,-125px);
-o-transform: translate(25px,-125px);
-ms-transform: translate(25px,-125px);
transform: translate(25px,-125px);
}
.line {
width: 12px;
height: 85px;
background-color: #dd4814;
}
.top {
-moz-transform: rotate(-40deg) translate(198px,-164px);
-webkit-transform: rotate(-40deg) translate(198px,-164px);
-o-transform: rotate(-40deg) translate(198px,-164px);
-ms-transform: rotate(-40deg) translate(198px,-164px);
transform: rotate(-40deg) translate(198px,-164px);
}
.left {
-moz-transform: rotate(29deg) translate(-82px,-254px);
-webkit-transform: rotate(29deg) translate(-82px,-254px);
-o-transform: rotate(29deg) translate(-82px,-254px);
-ms-transform: rotate(29deg) translate(-82px,-254px);
transform: rotate(29deg) translate(-82px,-254px);
}
.right {
-moz-transform: rotate(87deg) translate(-385px,-134px);
-webkit-transform: rotate(87deg) translate(-385px,-134px);
-o-transform: rotate(87deg) translate(-385px,-134px);
-ms-transform: rotate(87deg) translate(-385px,-134px);
transform: rotate(87deg) translate(-385px,-134px);
}
.medium-circle {
background-color: #dd4814;
height: 34px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
-o-border-radius: 17px;
-ms-border-radius: 17px;
border-radius: 17px;
width: 34px;
float: left;
}
.top-circle {
-moz-transform: translate(97px,-516px);
-webkit-transform: translate(97px,-516px);
-o-transform: translate(97px,-516px);
-ms-transform: translate(97px,-516px);
transform: translate(97px,-516px);
}
.left-circle {
-moz-transform: translate(-52px,-439px);
-webkit-transform: translate(-52px,-439px);
-o-transform: translate(-52px,-439px);
-ms-transform: translate(-52px,-439px);
transform: translate(-52px,-439px);
}
.right-circle {
-moz-transform: translate(42px,-386px);
-webkit-transform: translate(42px,-386px);
-o-transform: translate(42px,-386px);
-ms-transform: translate(42px,-386px);
transform: translate(42px,-386px);
}
.small-circle {
background-color: #ffffff;
height: 26px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-o-border-radius: 13px;
-ms-border-radius: 13px;
border-radius: 13px;
width: 26px;
float: left;
}
.main-top-circle {
-moz-transform: translate(1px,-515px);
-webkit-transform: translate(1px,-515px);
-o-transform: translate(1px,-515px);
-ms-transform: translate(1px,-515px);
transform: translate(1px,-515px);
}
.main-left-circle {
-moz-transform: translate(-145px,-435px);
-webkit-transform: translate(-145px,-435px);
-o-transform: translate(-145px,-435px);
-ms-transform: translate(-145px,-435px);
transform: translate(-145px,-435px);
}
.main-right-circle {
-moz-transform: translate(-39px,-381px);
-webkit-transform: translate(-39px,-381px);
-o-transform: translate(-39px,-381px);
-ms-transform: translate(-39px,-381px);
transform: translate(-39px,-381px);
}
(http://forum.ubuntu.ir/Themes/ubuntu-ir-theme/images/on.png)