CSS实现核辐射警告标志精选整理
导读： 本篇教程介绍了HTML+CSS入门 CSS实现核辐射警告标志，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。 ˂ 主要运用了CSS的几个属性transform-origin/rotate/skewY，还不懂...
本篇教程介绍了HTML+CSS入门 CSS实现核辐射警告标志，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
六个div实现
核辐射警告标志
html,body {
width: 100%;
height: 100%;
}
#warning {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
border-radius: 100%;
overflow: hidden;
}
。sector {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
}
。sector:nth-child（1） {
transform: rotate（30deg） skewY（-30deg）;
background: black;
}
。sector:nth-child（2） {
transform: rotate（-30deg） skewY（-30deg）;
background: yellow;
}
。sector:nth-child（3） {
transform: rotate（-90deg） skewY（-30deg）;
background: black;
}
。sector:nth-child（4） {
transform: rotate（-150deg） skewY（-30deg）;
background: yellow;
}
。sector:nth-child（5） {
transform: rotate（-210deg） skewY（-30deg）;
background: black;
}
。sector:nth-child（6） {
transform: rotate（-270deg） skewY（-30deg）;
background: yellow;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS实现核辐射警告标志精选整理
本文地址： https://pptw.com/jishu/655958.html