在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創建六邊形

回答

相關問題