在CSS/HTML创建六边形

我试着做一对情侣在CSS/HTML六边形的类似于这样的事情：在CSS/HTML创建六边形

http://www.asta-uk.com/sites/all/themes/asta/logo.png

现在我已经作出一个六边形，并试图另外两个复制次，但是上半部分似乎并没有在第二次出现。

有什么想法为什么？

PS使用IE，原因是它只能在IE环境中使用。

<html> 
    <HEAD> 

     <STYLE> 


.top 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid red; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:red; 
    border-left-color:transparent; 
} 

.middle 
{ 
    height: 20px; 
    background: red; 
    width: 50px; 
    display: block; 
} 

.bottom 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid red; 
    border-top-color:red; 
    border-right-color:transparent; 
    border-bottom-color:transparent; 
    border-left-color:transparent; 
} 

<!-- Second Hex--> 

.top2 
{ 
    height:0; 
    width:50; 
    display: block; 
    border: 15px solid black; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:black; 
    border-left-color:transparent; 
} 

.middle2 
{ 
    height: 20px; 
    background: black; 
    width: 50px; 
    display: block; 
} 

.bottom2 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid black; 
    border-top-color:black; 
    border-right-color:transparent; 
    border-bottom-color:transparent; 
    border-left-color:transparent; 
} 

<!--hex 3--> 

.top3 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid green; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:green; 
    border-left-color:transparent; 
} 

.middle3 
{ 
    height: 20px; 
    background: green; 
    width: 50px; 
    display: block; 
} 
.bottom3 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid green; 
    border-top-color:green; 
    border-right-color:transparent; 
    border-bottom-color:transparent; 
    border-left-color:transparent; 
} 




</STYLE> 
</HEAD> 
<BODY> 

<div class="hexagon"style="position: absolute; top: 0px; left: 2px;"> 
    <span class="top"></span> 
    <span class="middle"></span> 
    <span class="bottom"></span> 

</div> 
<!-- GREEN--> 
<div class="hexagon3" style="position: absolute; top: 48px; left: 55px;"> 
    <span class="top3"></span> 
    <span class="middle3"></span> 
    <span class="bottom3"></span> 

</div> 
<!-- black--> 
<div class="hexagon2" style="position: absolute; top: 120px; left: 40px;"> 
    <span class="top2"></span> 
    <span class="middle2"></span> 
    <span class="bottom2"></span> 

</div> 



</BODY 

</html>

来源

2012-07-12 Hiky

出于好奇，你为什么这样做？ HTML + CSS并不意味着创建原创艺术作品，该任务更适合SVG。 – Dai 2012-07-12 11:42:38

这是一个将用于电子邮件的标志，我无法使用图像的原因是因为某些邮件客户端会阻止图像 – Hiky 2012-07-12 12:00:55

如果是电子邮件，那么我不会推荐它。 Outlook（自2007年以来）使用Word的HTML渲染引擎，它是* awful *。我保证这些六边形不会呈现。另一种方法是将徽标图像作为附件包含在每封电子邮件中。这样邮件客户端不会阻止图像。 – Dai 2012-07-12 12:02:22

从CSS

像和 他们是越野车中删除您的评论。

这些意见意味着要一直HTML只不是css

对CSS的使用这个语法 - >/* A comment */

来源

2012-07-12 11:40:50 yogi

你有错字在width:50;添加px所以它应该是width:50px;为.top, .top2, .top3

来源

2012-07-12 11:40:46

我注意到，我发布后，但它没有区别:(第二个2六边形的顶部仍然不显示。 – Hiky 2012-07-12 12:00:17

在CSS/HTML创建六边形

回答

相关问题