今天做了下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. Yii2.0源码阅读-PHP如何与redis通信？

    PHP与Redis可以通过socket进行通信,前提是PHP需要实现Redis的协议 RESP协议描述: 字符串 \r\n : 表示一个正确的状态信息,具体信息是'+'后面的字符(Simple Str ...

  2. CRM客户关系管理系统（十一）

    第十一章.学员报名流程开发 11.1.面包屑的制作 Boorstrap路径导航条 (1)table_obj_list.html页面面包屑 def table_obj_list 返回数据改成locals ...

  3. CALayer简介

    一.什么是CALayer * 在iOS系统中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. * 其实UIView之所以 ...

  4. 【.NET Core】ASP.NET Core之IdentityServer4(1)：快速入门

    [.NET Core]ASP.NET Core之IdentityServer4 本文中的IdentityServer4基于上节的jenkins 进行docker自动化部署. 使用了MariaDB,EF ...

  5. 体育Bank2016会议笔记

    补注:会议全称应该是体育Bank2016体育投融资总裁年会 新华社体育部徐仁基 演讲主题:帮郭川找到大海-->帮民众找到自己真正的体育爱好 激发和培养体育市场是重中之重 将体育培养成生活习惯.生 ...

  6. Roundcube 1.2.2 - Remote Code Execution

    本文简要记述一下Roundcube 1.2.2远程代码执行漏洞的复现过程. 漏洞利用条件 Roundcube必须配置成使用PHP的mail()函数(如果没有指定SMTP,则是默认开启) PHP的mai ...

  7. 如何优雅的关闭Java线程池

    面试中经常会问到,创建一个线程池需要哪些参数啊,线程池的工作原理啊,却很少会问到线程池如何安全关闭的. 也正是因为大家不是很关注这块,即便是工作三四年的人,也会有因为线程池关闭不合理,导致应用无法正常 ...

  8. python笔记：#012#函数

    函数基础 目标 函数的快速体验 函数的基本使用 函数的参数 函数的返回值 函数的嵌套调用 在模块中定义函数 01. 函数的快速体验 1.1 快速体验 所谓函数,就是把 具有独立功能的代码块 组织为一个 ...

  9. Django REST framework+Vue 打造生鲜超市（七）

    目录 生鲜超市(一)    生鲜超市(二)    生鲜超市(三) 生鲜超市(四)    生鲜超市(五)    生鲜超市(六) 生鲜超市(七)    生鲜超市(八)    生鲜超市(九) 生鲜超市(十) ...

  10. js 遍历 each() 方法

    1.例子: <html><head><script type="text/javascript" src="/jquery/jquery.j ...