Tworzenie sześciokątów w css / html

Question

Jul 12, 2012, 01:35 PM

Tworzenie sześciokątów w css / html

Próbuję zrobić kilka sześciokątów w css / html, aby przypominały coś takiego:

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

teraz zrobiłem jeden sześciokąt i próbowałem go skopiować jeszcze dwa razy, ale górna część nie wydaje się pokazywać drugiego.

jakieś pomysły dlaczego?

PS używa IE, ponieważ jest to możliwe tylko w środowisku 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>