今天做了下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. Java IO学习--(三)通道

    Java IO中的管道为运行在同一个JVM中的两个线程提供了通信的能力.所以管道也可以作为数据源以及目标媒介. 你不能利用管道与不同的JVM中的线程通信(不同的进程).在概念上,Java的管道不同于U ...

  2. css选择器应用

    .mynav li:not(:last-child) { margin-right: 20px; }

  3. 超精简易用cocoaPods的安装和使用

    cocoaPods 安装和使用 第一步:替换ruby源 $ gem sources -l                                查看当前ruby的源 $ gem sources ...

  4. DDD中直接引用和ID关联的关系

    聚合根到聚合根:通过ID关联: 聚合根到其内部的实体,直接引用: 聚合根到值对象,直接引用: 实体到聚合根: 通过ID关联 : 实体到其聚合的聚合根:1对1ID关联,1对多可直接引用 : 实体到其聚合 ...

  5. strtok函数读写冲突问题

    先上测试代码 #include "stdafx.h" #include <iostream> using namespace std; int _tmain(int a ...

  6. 全屏slider--swiper

    这两年,这种滑动器技术在互联网产品介绍页设计上非常常用,最近某个项目需要这种设计,在网上找了一下,有个老外产的这种设计组件swiper已经非常成熟,原来这个东西设计初衷是pad之类的移动触摸交互设备, ...

  7. Java自学编程学习之路资源合集

    Java Web学习 STEP.1---Java基础最重要 工欲善其事,必先利其器.想要学好Java Web,或者说想要开始学Java Web,Java的基础是必不可少. 基本语法(★★★★★) 数组 ...

  8. Ocelot中文文档-配置

    这里有一个配置的列子.其中有两个配置块.一个ReRoutes数组和一个GlobalConfiguration.ReRoutes配置块是一些告诉Ocelot如何处理上游请求的对象.Globalconfi ...

  9. golang使用通道模仿实现valatile语义

        golang团队在sync中提供了很多的原子操作函数,将原子操作转向由单独一个包提供,而不是像Java那样提供各种累,确实上手得更加简单.但是golang原生提供的并发操作没有Java来得丰富 ...

  10. Roundcube Webmail信息泄露漏洞(CVE-2015-5383)

    Preface Software: https://roundcube.net/Versions: 1.1.x<1.1.2(亲测1.1.5也有效)CVE: CVE-2015-5383Author ...