今天做了下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！

CSS实现核辐射警告标志的更多相关文章

  1. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  2. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...

  3. 【HTML/XML 7】CSS层叠样式表

    导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...

  4. ESXI主机打开shell后主机警告处理

    昨天为了配置snmp监控,将几台ESXI 5.5主机的shell 在控制台上从disable状态修改为enable状态后,登陆vcenter后,发现所有的主机都有警告. 处理过程如下: 选中有警告标志 ...

  5. iOS工程中如何去掉第三方的警告

    一)第一种方法 在工程中有警告的地方,右键选择Review in log,然后就能看到类似[Wnonnull]这样的警告, 然后在工程buildSettings中的Other Warning Flag ...

  6. Css入门课程 Css基础

    html css javascript三者关系 html是网页内容的载体 css是网页内容的表现,外观控制 javascript是网页逻辑处理和行为控制 css相对于html标签属性的优势 css简化 ...

  7. TSR交通标志检测与识别

    TSR交通标志检测与识别 说明: 传统图像处理算法的TSR集成在在ARM+DSP上运行,深度学习开发的TSR集成到FPGA上运行. 输入输出接口 Input: (1)图像视频分辨率(整型int) (2 ...

  8. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  9. 手把手教你ARC——iOS/Mac开发ARC入门和使用

    转载自:http://www.onevcat.com/2012/06/arc-hand-by-hand/ 本文部分实例取自iOS 5 Toturail一书中关于ARC的教程和公开内容,仅用于技术交流和 ...

随机推荐

  1. React Native入门 开发第一个React Native应用

    1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(tes ...

  2. 使用XStream是实现XML与Java对象的转换(1)--简介及入门示例

    一.简单介绍 XStream是thoughtworks开发的开源框架,用于实现XML数据于Java对象.Json数据的转换.它不需要schema或其他的mapping文件就可以进行java对象和xml ...

  3. Javascript、CSS、HTML面试题

    1 JS中的三种弹出式消息提醒(警告窗口.确认窗口.信息输入窗口)的命令是什么? alert     confirm     prompt 2声明一个已经存在一个CSS有几种方式? 1.导入一个已经存 ...

  4. 怎么分别javascript写在<head>里还是<body>里面?

    怎么分别javascript写在<head>里还是<body>里面? 具体哪些语句写在<body>里,哪些语句写在<head>里 满意答案 BeginN ...

  5. Web系统测试Web安全性测试

    WEB安全性测试介绍WEB安全性测试--拒绝服务攻击WEB安全性测试--文件上传漏洞WEB安全性测试--跨站攻击WEB安全性测试--SQL注入一WEB安全性测试--SQL注入二WEB安全性测试--SQ ...

  6. 网易面经（Java开发岗）

    网易面经(Java岗) 网易两面面经整理 岗位:我投递的是杭研所的Java开发岗位.行程:半天的时间南京=杭州之间穿行,单程2个小时,从杭州东站=网易大厦,单程1个小时(如果能买到城站高铁动车票可以从 ...

  7. .net core使用orm操作mysql数据库

    Mysql数据库由于其体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库.MySQL是一个多用户.多线程的关系型数据库管理系 ...

  8. 微信公众号网页授权登录--JAVA

    网上搜资料时,网友都说官方文档太垃圾了不易看懂,如何如何的.现在个人整理了一个通俗易懂易上手的,希望可以帮助到刚接触微信接口的你. 请看流程图!看懂图,就懂了一半了: 其实整体流程大体只需三步:用户点 ...

  9. DDGScreenShot — 复杂屏幕截屏（如view ScrollView webView wkwebView）

    写在前面 最近有这么一个需求,分享页面,分享的是web订单截图,既然是web 就会有超出屏幕的部分, 生成的图片还要加上我们的二维码,这就涉及到图片的合成了. 有了这样的需求,就是各种google.也 ...

  10. Hi，这有一份风控体系建设干货

    互联网.移动互联网.云计算.大数据.人工智能.物联网.区块链等技术已经在人类经济生活中扮演越来越重要的角色,技术给人类带来各种便利的同时,很多企业也饱受"硬币"另一面的伤害,并且形 ...