html 警告图标,HTML+CSS入门 CSS实现核辐射警告标志

本篇教程介绍了HTML+CSS入门 CSS实现核辐射警告标志，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

主要运用了CSS的几个属性transform-origin/rotate/skewY，还不懂的赶快去看看哈。

三个div实现

html>

核辐射警告标志

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%;

background-color: yellow;

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(-90deg) skewY(-30deg);

background: black;

}

.sector:nth-child(3) {

transform: rotate(-210deg) skewY(-30deg);

background: black;

}

六个div实现

html>

核辐射警告标志

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;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！