Создание шестиугольников в 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>