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知识!
html 警告图标,HTML+CSS入门 CSS实现核辐射警告标志相关推荐
- html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
- html的公共样式,HTML+CSS入门 CSS公共样式
本篇教程介绍了HTML+CSS入门 CSS公共样式,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < @charset "utf-8"; *{margin ...
- html图片滚动红点_HTML+CSS入门 CSS头像右上角的红点
本篇教程介绍了HTML+CSS入门 CSS头像右上角的红点,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 说明: 1.主要用到position定位: 2.使用border ...
- html font-family设置无效,HTML+CSS入门 CSS设置中文字体(font-family:黑体)后样式失效问题如何解决...
本篇教程介绍了HTML+CSS入门 CSS设置中文字体(font-family:"黑体")后样式失效问题如何解决,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. ...
- 浅谈对html css的理解,HTML+CSS入门 CSS选择器 、属性和值浅谈
body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时, ...
- html常用布局和写法,HTML+CSS入门 css常用布局多行多列解析
CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工 ...
- CSS入门(css 基本教程)
CSS入门 CSS简介 v 概念 Cascading Style Sheets ,层叠样式表 v 功能 v 基本语法 CSS的定义是由三个部分构成:选择符(se ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- html css导航栏字体图标,HTML+CSS入门之两种图标字体库
本篇教程介绍了HTML+CSS入门之两种图标字体库,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < ## 0. 前言 比较基础的图标加载:和块元素的背景background ...
- html+css+小图标,HTML+CSS入门 一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门 一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
最新文章
- pendo android,Pendo
- 嵌入式s5vp210裸机 KXTF9-2050(G-sensor)
- 关于JS面向对象、设计模式、以及继承的问题总结
- RQNOJ 83 魔兽世界
- GDAL算法进度条使用说明
- js中父窗口获得模态窗口的返回值
- 应用Strong Name保存.NET应用程序集
- Php 魔术函数性能,php常用的魔术函数详细解析
- Error loading native library: libnjni9.so.的解决办法
- python 验证码图片 模拟登录_Python 模拟生成动态产生验证码图片的方法
- Inversion of Control(控制反转)之 Dependency Injection(依赖注入)
- 深入解读Linux进程调度系列(2)——调度类sched_class详解
- 计算机组成原理 实验六 存储器容量扩展
- SolidWorks2010
- MySQL-Order by用法
- SmartToast
- PS CC2017安装及破解
- 学术Assignment写作怎么了解文献内容?
- [slove]Unable to find required classes (javax.activation.DataHandler and javax.m
- 安装opencv时报错:Could not build wheels for opencv-python which use PEP 517 and cannot be installed direc
热门文章
- 嗖嗖移动业务大厅项目_会员合作项目:10086移动外呼业务
- 渗透测试实习日记day1
- 明尼苏达大学双城分校计算机科学,UMN的CS「明尼苏达大学双城分校计算机科学与工程系」...
- LX4056耐高压线性锂电池充电IC(耐压30V,带OVP,带NTC)
- 暴力破解网站后台burpsuite
- Git撤销操作之使用--amend改写单次提交
- VMware16阿里云盘
- 怎么修改MAC电脑名字,三步教你修改MAC电脑的名字
- 《IT行业职位介绍-搞懂高级程序员、架构师、技术总监、CTO从薪资到技能的区别》
- 千呼万唤的线粒体基因组完成图