CSS實現核輻射警告標志

時間 2019-12-08

標籤 css 實現核輻射警告標誌欄目 CSS 简体版

原文原文鏈接

　　今天作了下360的前端星計劃測試題，碰到一個有趣的css題，實現以下圖效果，記得上次也是在360面試的時候碰到一個有趣的css實現寶馬logo，不得不說360的面試題仍是頗有創意的。css

　　我一直努力想用一個div實現這個效果，可是想了好久，也沒找到一個較好的解決方法，暫且先用笨辦法實現了，主要運用了CSS的幾個屬性transform-origin/rotate/skewY，還不懂的趕快去看看哈。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%;
 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！前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。