Знак радиоактивности
by LuckyCat
HTML
<div id="radiohazardous">
<div id="hazard_background"></div>
<div id="hazard_sign">
<div class="circle"></div>
<div class="sector bottom">
<div class="top"></div>
<div class="bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
<div class="sector left">
<div class="top"></div>
<div class="bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
<div class="sector right">
<div class="top"></div>
<div class="bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
</div>
</div>
CSS
#radiohazardous, #hazard_background{
width: 0px;
height: 0px;
}
#radiohazardous{
border-bottom:511px solid #000;
border-right:312px solid transparent;
border-left:312px solid transparent;
position:relative;
left:200px;
top:10px;
}
#hazard_background{
border-bottom: 412px solid #FF0;
border-right: 250px solid rgba(0, 0, 0, 0);
border-left: 250px solid rgba(0, 0, 0, 0);
position: absolute;
top: 63px;
left: -249px;
}
#hazard_sign{
position: absolute;
bottom: -313px;
left: -24px;
}
#radiohazardous .circle{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #000;
border: none;
position: absolute;
}
#hazard_sign .sector{
border:0px transparent;
width:120px;
height:120px;
position:absolute;
left: -36px;
top: 57px;
/*сокроем все, что выходит за пределы сектора*/
overflow:hidden;
-webkit-transform-origin: 60px -32px;
-moz-transform-origin: 60px -32px;
-o-transform-origin: 60px -32px;
-ms-transform-origin: 60px -32px;
transform-origin: 60px -32px;
}
#hazard_sign .sector .bottom{
width: 220px;
height: 220px;
border: rgba(0, 0, 0, 0);
border-radius: 110px;
border-bottom: 1px solid #000;
position: absolute;
top: -129px;
left:...