CSS实现核辐射警告标志
今天做了下360的前端星计划测试题，碰到一个有趣的css题，实现如下图效果，记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo，不得不说360的面试题还是很有创意的。
我一直努力想用一个div实现这个效果，但是想了很久，也没找到一个较好的解决方法，暂且先用笨办法实现了，主要运用了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>其实这两个只能算一种方法，我期待的是只用一个div就可以实现，欢迎各位大开脑洞，一起挑战更多有趣的css！
转载于:https://www.cnblogs.com/lewiscutey/p/9079455.html
CSS实现核辐射警告标志相关推荐
- keil uvisoin软件打开他人的工程文件上面出现黄色感叹号警告标志，后续编译不能生成.o文件而报错
keil uvisoin软件打开他人的工程文件上面出现黄色感叹号警告标志,后续编译不能生成.o文件而报错 解决方案: 第一种:后续编译不能生成.o文件而报错 右键出现感叹号的文件 点击第一个" ...
- 警告标志：警告车辆、行人注意危险地点的标志
警告标志:警告车辆.行人注意危险地点的标志. 警1 十字交叉 警2 T形交叉 警3 T形交叉 警4 T形交叉 警5 Y形交叉 警6 环形交叉 警7 向左急弯路 警8 向右急弯路 警9 反向弯路 警10 ...
- 机动车 科目一 之 标识标志 (警告标志 [黄色])
作者: Jintao 日期:2021-7-12 简介: 机动车 科目一 之 标识标志 (警告标志 [黄色]) 3.1 警告标志 [黄色] 警告标志的颜色为黄底,黑边,黑图案,形状为等边三角形,顶角朝上 ...
- Python编辑器Spyder警告标志设置
Python编辑器Spyder简洁易用,但不经过设置的话,警告标志多了会令人怀疑人生. 今天给大家讲一下去掉Spyder中的警告标志!例如下面这段代码:是PyQt5经典的入门学习代码. from Py ...
- 纯HTML+CSS 画奥运五环标志，我就是闲的
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8&q ...
- css做html5logo,用纯css实现的html5logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: 源代码下载地址: css部分代码如下: html, body, div, span, applet, object, ...
- 运行linux的配置,Linux系统运行级别配置
jQuery系列:Ajax 1. load(url, [data], [callback]) 1.1 解析 载入远程 HTML 文件代码并插入至 DOM 中. 语法格式: load(url, [dat ...
- 蓝底白色 html,新交通标志讲解
在新修的立交桥上见到这个交通标志,不知道是什么意思线形诱导标标志,线形诱导标的颜色规定为:指示性线形诱导标一般道路为蓝底白图案,高速公路为绿底白图案,用以提供一般性行驶指示:警告性线形诱导标为红底白图 ...
- TSR交通标志检测与识别
TSR交通标志检测与识别 说明: 传统图像处理算法的TSR集成在在ARM+DSP上运行,深度学习开发的TSR集成到FPGA上运行. 输入输出接口 Input: (1)图像视频分辨率(整型int) (2 ...
最新文章
- 阿里开源首个DL框架，新型XDL帮你搞定大规模稀疏数据
- ajax html例子,AJAX实例
- JavaScript中getBoundingClientRect()方法详解
- #include *.c文件的妙用
- ffmpeg libx264_编程小短文：FFmpeg视频画面尺寸调整，必知必会
- Windows 10配置VS Code C++环境（超详细，面向小白以及大佬们）
- extras mibs php7,ubuntu编译安装php7遇到的问题及解决方案
- mysql 封装json数据类型_mysql中的json数据类型
- CPython中多线程的限制
- 重启Oracle数据库实例及监听器
- Facebook登陆时遇到的问题
- 核子公式——量化IT团队绩效
- 网络安全专家教你设置史上最安全的WiFi密码
- Spark Core (TopN、mysql写入、读取文件通过RDD结合数据库中的表)练习3套
- 怎样判断计算机硬盘损坏,检测硬盘是否损坏的方法来了，这里有四种判断方法！...
- 华为任正非：不为假动作付酬
- centos6 安装redis
- 裁判文书网爬虫Docid解密思路
- CSDN-markdown技巧
- Mad Scientist[USACO]