今天做了下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！
原文地址：https://www.cnblogs.com/lewiscutey/p/9079455.html
时间： 2024-07-31 21:07:30