通過css將圖像轉換爲div

您可以幫助下面的圖像轉換爲Div或表格。通過css將圖像轉換爲div

我已經嘗試過，但我已經被塞住，直到圈。 Div 1，Div 2到Div 7我將用標題替換，所以我需要那些在DIV中間的。我不需要3d邊框，但是如果你幫我一個，我會很感激。

#container { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.cover { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    clip: rect(0 100px 100px 50px); 
 
} 
 

 
.pie { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    clip: rect(0 50px 100px 0px); 
 
} 
 

 
#part1-wrapper { 
 
    transform: rotate(0deg); 
 
} 
 

 
#part1 { 
 
    background-color: #3266FF; 
 
    transform: rotate(90deg); 
 
} 
 
#part2-wrapper { 
 
    transform: rotate(90deg); 
 
} 
 

 
#part2 { 
 
    background-color: green; 
 
    transform: rotate(90deg); 
 
} 
 
#part3-wrapper { 
 
    transform: rotate(180deg); 
 
} 
 

 
#part3 { 
 
    background-color: #BF0000; 
 
    transform: rotate(90deg); 
 
} 
 
#part4-wrapper { 
 
    transform: rotate(270deg); 
 
} 
 

 
#part4 { 
 
    background-color: #7030A0; 
 
    transform: rotate(90deg); 
 
}

<div id="container"> 
 
    <div id="part1-wrapper" class="cover"> 
 
     <div id="part1" class="pie"></div> 
 
    </div> 
 
    <div id="part2-wrapper" class="cover"> 
 
     <div id="part2" class="pie"></div> 
 
    </div> 
 
     <div id="part3-wrapper" class="cover"> 
 
     <div id="part3" class="pie"></div> 
 
    </div> 
 
    <div id="part4-wrapper" class="cover"> 
 
     <div id="part4" class="pie"></div> 
 
    </div> 
 
</div>

來源

2017-05-31 Sree

對於我，你卻沒有足夠的嘗試，圖像顯示的，你需要'9 divs'但你只得到了'4' ......在我眼裏它不是一個東西ISN 't工作或我該如何解決它的問題，這是一個「你可以請做我的工作的其餘部分」 – caramba

我很窮的CSS.Can你請幫我做 – Sree

我會說，使用的CSS顯示相當不錯的嘗試，只是不是最好的解決方案。這種東西比看起來簡單得多，這正是我的解決方案與嘗試所展現的。你只需要知道事實CSS通常具有部分功能的子屬性（x/y溢出，左邊界，左邊界，左上角等） –

您可以通過使用特定的角落邊界半徑這個顯著簡單。

#container { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.pie { 
 
    position: absolute; 
 
    width: 49%; 
 
    height: 49%; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    line-height: 98px; 
 
} 
 

 
#part1 { 
 
    background-color: #3266FF; 
 
    top:0; 
 
    left:0; 
 
    border-top-left-radius: 100%; 
 
} 
 

 
#part2 { 
 
    background-color: green; 
 
    top:0; 
 
    right:0; 
 
    border-top-right-radius: 100%; 
 
} 
 

 
#part3 { 
 
    background-color: #BF0000; 
 
    bottom:0; 
 
    right:0; 
 
    border-bottom-right-radius: 100%; 
 
} 
 

 
#part4 { 
 
    background-color: #7030A0; 
 
    bottom:0; 
 
    left:0; 
 
    border-bottom-left-radius: 100%; 
 
} 
 

 
#part5 { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    background: #333394; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height:50px; 
 
    top:50%; 
 
    margin-top:-25px; 
 
    left:50%; 
 
    margin-left:-25px; 
 
}

<div id="container"> 
 
    <div id="part1" class="pie">part 1</div> 
 
    <div id="part2" class="pie">part 2</div> 
 
    <div id="part3" class="pie">part 3</div> 
 
    <div id="part4" class="pie">part 4</div> 
 
    <div id="part5">part 5</div> 
 
</div>

來源

2017-05-31 14:58:31

您能否告訴我製作中心圖像 – Sree

@ Sree他已經爲你做了所有這些工作，也許可以考慮一下，看看你是否可以擴展以獲得你所需要的東西 –

也增加了中間圓圈，因爲它的工作方式稍有不同。從這裏你應該可以自己改變你的需求 –

通過css將圖像轉換爲div

回答

相關問題