從部分切出部分

Question

Here我試圖製作印度國旗。我只是想從

html > body > .flag > div:nth-child(2) > div 

切出

html > body > .flag > div:nth-child(2) > div > div:after 

和

html > body > .flag > div:nth-child(2) > div > div:before 

使中間阿肖克脈輪形成...不知道如何做到這一點？

Answer 1

這裏是完整的HTML/CSS創建印度國旗（內容複製基於此CodePen）。

您可以更改.flagfont-size以更改標記大小。另外，如果您使用從​​到.spoke24的CSS預處理器類可以移動到預處理器循環。以下是演示：

body { 
 
    background-color: #ccc; 
 
} 
 

 
.flag { 
 
    font-size: 6px; 
 
    width: 90em; 
 
    height: 60em; 
 
    border: 1px solid #aaa; 
 
} 
 

 
.stripe { 
 
    height: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 

 
.stripe1 { 
 
    background-color: #FF9933; 
 
} 
 

 
.stripe2 { 
 
    padding: 1em; 
 
    background-color: #fff; 
 
} 
 

 
.stripe3 { 
 
    background-color: #138808; 
 
} 
 

 
.ashok { 
 
    width: 16em; 
 
    height: 16em; 
 
    position: relative; 
 
    border: 1em solid navy; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.ashok:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 6.5em; 
 
    left: 6.5em; 
 
    width: 3em; 
 
    height: 3em; 
 
    background-color: navy; 
 
    border-radius: 50%; 
 
} 
 

 
.spoke { 
 
    width: 1em; 
 
    height: 0; 
 
    position: absolute; 
 
    top: 7.75em; 
 
    left: 8em; 
 
    border-top: 0.25em solid transparent; 
 
    border-right: 2em solid navy; 
 
    border-bottom: 0.25em solid transparent; 
 
    transform-origin: 0 0.25em; 
 
} 
 

 
.spoke:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    top: -0.25em; 
 
    left: 3em; 
 
    border-top: 0.25em solid transparent; 
 
    border-left: 5em solid navy; 
 
    border-bottom: 0.25em solid transparent; 
 
} 
 

 
.spoke:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0.8em; 
 
    height: 0.8em; 
 
    top: 0.66em; 
 
    left: 7.6em; 
 
    background-color: navy; 
 
    border-radius: 50%; 
 
} 
 

 
.spoke1 { 
 
    transform: rotate(0deg); 
 
} 
 

 
.spoke2 { 
 
    transform: rotate(15deg); 
 
} 
 

 
.spoke3 { 
 
    transform: rotate(30deg); 
 
} 
 

 
.spoke4 { 
 
    transform: rotate(45deg); 
 
} 
 

 
.spoke5 { 
 
    transform: rotate(60deg); 
 
} 
 

 
.spoke6 { 
 
    transform: rotate(75deg); 
 
} 
 

 
.spoke7 { 
 
    transform: rotate(90deg); 
 
} 
 

 
.spoke8 { 
 
    transform: rotate(105deg); 
 
} 
 

 
.spoke9 { 
 
    transform: rotate(120deg); 
 
} 
 

 
.spoke10 { 
 
    transform: rotate(135deg); 
 
} 
 

 
.spoke11 { 
 
    transform: rotate(150deg); 
 
} 
 

 
.spoke12 { 
 
    transform: rotate(165deg); 
 
} 
 

 
.spoke13 { 
 
    transform: rotate(180deg); 
 
} 
 

 
.spoke14 { 
 
    transform: rotate(195deg); 
 
} 
 

 
.spoke15 { 
 
    transform: rotate(210deg); 
 
} 
 

 
.spoke16 { 
 
    transform: rotate(225deg); 
 
} 
 

 
.spoke17 { 
 
    transform: rotate(240deg); 
 
} 
 

 
.spoke18 { 
 
    transform: rotate(255deg); 
 
} 
 

 
.spoke19 { 
 
    transform: rotate(270deg); 
 
} 
 

 
.spoke20 { 
 
    transform: rotate(285deg); 
 
} 
 

 
.spoke21 { 
 
    transform: rotate(300deg); 
 
} 
 

 
.spoke22 { 
 
    transform: rotate(315deg); 
 
} 
 

 
.spoke23 { 
 
    transform: rotate(330deg); 
 
} 
 

 
.spoke24 { 
 
    transform: rotate(345deg); 
 
}

<div class="flag"> 
 
    <div class="stripe stripe1"></div> 
 
    <div class="stripe stripe2"> 
 
    <div class="ashok"> 
 
     <div class="spoke spoke1"></div> 
 
     <div class="spoke spoke2"></div> 
 
     <div class="spoke spoke3"></div> 
 
     <div class="spoke spoke4"></div> 
 
     <div class="spoke spoke5"></div> 
 
     <div class="spoke spoke6"></div> 
 
     <div class="spoke spoke7"></div> 
 
     <div class="spoke spoke8"></div> 
 
     <div class="spoke spoke9"></div> 
 
     <div class="spoke spoke10"></div> 
 
     <div class="spoke spoke11"></div> 
 
     <div class="spoke spoke12"></div> 
 
     <div class="spoke spoke13"></div> 
 
     <div class="spoke spoke14"></div> 
 
     <div class="spoke spoke15"></div> 
 
     <div class="spoke spoke16"></div> 
 
     <div class="spoke spoke17"></div> 
 
     <div class="spoke spoke18"></div> 
 
     <div class="spoke spoke19"></div> 
 
     <div class="spoke spoke20"></div> 
 
     <div class="spoke spoke21"></div> 
 
     <div class="spoke spoke22"></div> 
 
     <div class="spoke spoke23"></div> 
 
     <div class="spoke spoke24"></div> 
 
    </div> 
 
    </div> 
 
    <div class="stripe stripe3"></div> 
 
</div>