今天做了下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. $cordovaCamera 插件 上传头像 图片功能

    首先要注入  $cordovaCamera 使用相机拍照 var useCamera = function() { var options = { //这些参数可能要配合着使用,比如选择了source ...

  2. majority element(数组中找出出现次数最多的元素)

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  3. JSP指令与动作

    Jsp基本指令和动作 (2011-08-18 16:25:13) 转载▼ 标签: 杂谈 分类: java JSP基本指令 jsp命令指令用来设置与整个jsp页面相关的属性,它并不直接产生任何可见的输出 ...

  4. 2T以上的盘怎么分区， 利用parted创建 linuxTB硬盘GPT分区

    parted创建GPT分区(fdisk不支持创建GPT分区,GPT支持大于2TB分区,MBR不支持) 介绍2种分区表: MBR分区表:(MBR含义:主引导记录) 所支持的最大卷:2T (T; tera ...

  5. [转]用python 10min手写一个简易的实时内存监控系统

    简易的内存监控系统 本文需要有一定的python和前端基础,如果没基础的,请关注我后续的基础教程系列博客 文章github源地址,还可以看到具体的代码,喜欢请在原链接右上角加个star 腾讯视频链接 ...

  6. ccf 目录格式转换

    任务背景: 在网络上获取的ccf目录的格式是PDF,但是要进行数据分析时,PDF格式的数据是不符合要求的,因此需要将pdf格式转化为excel格式 任务目的: 将pdf格式的CCF目录转化为excel ...

  7. Windows10远程报错:由于CredSSP加密Oracle修正

    Windows10远程桌面连接 报错信息 : 网上找到方法 但是奈何是 "Win10家庭版" 不能使用这个办法,具体操作可以看最后的引用链接 !!!! 策略路径:"计算机 ...

  8. 洛谷 P1054 解题报告

    P1054 等价表达式 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的 ...

  9. js相关

    记录工作中用到的js实用方法: 1. 判断包含:indexOf "https".indexOf("http") 包含结果为0,不包含结果为-1: 通常用(&qu ...

  10. 读《图解HTTP》有感-（HTTP报文内的HTTP消息）

    写在前面 HTTP通信包括从客户端到服务端的的请求以及服务端返回客户端的响应 正文 1.什么是HTTP报文?它由什么构成?包含几个部分? 用于HTTP协议交互的信息就是HTTP报文:它是由多行数据构成 ...