通过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

回答

相关问题