首页 / 知识
CSS实现核辐射警告标志精选整理
2023-04-11 13:43:00
本篇教程介绍了HTML+CSS入门 CSS实现核辐射警告标志，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
主要运用了CSS的几个属性transform-origin/rotate/skewY，还不懂的赶快去看看哈。
三个div实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>核辐射警告标志</title>
</head>
<style type="text/css">
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;
}
</style>
<body>
<div id="warning">
<div class="sector"></div>
<div class="sector"></div>
<div class="sector"></div>
</div>
</body>
</html>
六个div实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>核辐射警告标志</title>
</head>
<style type="text/css">
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;
}
</style>
<body>
<div id="warning">
<div class="sector"></div>
<div class="sector"></div>
<div class="sector"></div>
<div class="sector"></div>
<div class="sector"></div>
<div class="sector"></div>
</div>
</body>
</html>
|
最新内容
相关内容
python如何实现对Python中列表的排
python如何实现对Python中列表的排序?，培训，工作，实例，方法，关键字，对象，函数，以上，列表，表达式，对List进行排序，Python提供了两个方法方法1.
python怎样忽略warning警告错误?
python怎样忽略warning警告错误?，培训，情况，代码，错误，模块，下面，之前，以上，程序，更多，python开发中经常遇到报错的情况，但是warning通常并不
python怎么实现模式匹配
python怎么实现模式匹配，培训，时间，代码，算法，字符，模式，复杂度，向量，空间，两个，python通过BF算法实现关键词匹配，BF算法，即暴风(BruteForce)算
pythonimport是怎么实现的?
pythonimport是怎么实现的?，培训，模块，文件，变量，里面，内容，路径，函数，顺序，内存，基本概念：模块(module)：其实就是一个py文件，里面定义了各种变
python语句和缩进的实现
python语句和缩进的实现，代码，培训，概念，语句，数列，冒号，举例来说，赋值，外层，指令，python语句和缩进的实现Python解释程序能够执行的指令就是
python切片步长怎样实现
python切片步长怎样实现，步长，位置，一致，数据，培训，切片，序号，下标，负号，结束，python切片步长怎样实现1、说明在list中获得下标，从定义的位置
python如何使用merge实现堆
python如何使用merge实现堆，较大，数据，培训，序列，个数，元素，内存，消耗，实例，根据，python如何使用merge实现堆1、说明对于较大的数据集，将会占
关于c＃：关键值对数据结构的最佳实现？
关于c＃：关键值对数据结构的最佳实现？，关于c＃：关键值对数据结构的最佳实现？，数据结构,我想,让我,假设，Best implementation for Key Value P
W3C XHTML/CSS 验证在完成工作时有
W3C XHTML/CSS 验证在完成工作时有多重要？，W3C XHTML/CSS 验证在完成工作时有多重要？，验证,运行,这是,是在，How important is W3C XHTM
关于css：FF3 WinXP！= FF3 Ubuntu-为
关于css：FF3 WinXP！= FF3 Ubuntu-为什么？，关于css：FF3 WinXP！= FF3 Ubuntu-为什么？，显示方式,网站,我在,有所不同，FF3 WinXP != FF3 Ubuntu
有关在SQL Server中实现审核表的建
有关在SQL Server中实现审核表的建议？，有关在SQL Server中实现审核表的建议？，结构,方法,审核,我要，Suggestions for implementing audi
如何使浏览器查看CSS和Javascript
如何使浏览器查看CSS和Javascript更改？，如何使浏览器查看CSS和Javascript更改？，浏览器缓存,文件,浏览器,我也，How can I make the brow