今天做了下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. ORACLE之TO_DATE (转载)

    转自 http://www.cnblogs.com/anran_guojianjun/archive/2009/09/11/1564535.html 一.在使用Oracle的to_date函数来做日期 ...

  2. datetimepicker日期框选择后,无法触发bootstrapValidator

    如上图所示,当选择日期后下面的"栏位不能为空"提示并不能及时的消失,同时点击提交按钮也没有用. 解决如下: 在birthday的校验规则里面添加trigger:'change',就 ...

  3. vue-cli目录结构

  4. [Luogu 4135] 作诗

    Description 神犇SJY虐完HEOI之后给傻×LYD出了一题: SHY是T国的公主,平时的一大爱好是作诗. 由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M ...

  5. windows系统下输入法图标显示设置

    原先任务栏有两个搜狗输入法的标志,还有一个"中/英"的图标:甚至桌面还悬浮这一个搜狗输入法图标. 打开vscode等工具时,桌面悬浮的图标有时可能会遮挡到一些信息,十分不爽. 如今 ...

  6. wxpython实现界面跳转

    wxPython实现Frame之间的跳转/更新的一种方法 wxPython是Python中重要的GUI框架,下面通过自己的方法实现模拟类似PC版微信登录,并跳转到主界面(朋友圈)的流程. (一)项目目 ...

  7. spring boot：thymeleaf使用详解

    简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在 ...

  8. 深度学习之 TensorFlow（四）：卷积神经网络

    基础概念: 卷积神经网络(CNN):属于人工神经网络的一种,它的权值共享的网络结构显著降低了模型的复杂度,减少了权值的数量.卷积神经网络不像传统的识别算法一样,需要对数据进行特征提取和数据重建,可以直 ...

  9. 搭建第一个spring boot项目

    一.开发工具建议使用Spring Tool Suite 下载地址:http://spring.io/tools/sts/all/ 点击versions选择相应的版本下载,解压后直接运行即可. 二.创建 ...

  10. 浅谈Java多线程的同步问题 【转】

    多线程的同步依靠的是对象锁机制,synchronized关键字的背后就是利用了封锁来实现对共享资源的互斥访问. 下面以一个简单的实例来进行对比分析.实例要完成的工作非常简单,就是创建10个线程,每个线 ...