Creating Hexagons in css / html [duplicate]

Question

Im trying to make a couple of hexagons in css /html to resemble something like this:

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

now i have made one hexagon, and tried to copy it two other times but the top part doesn't seem to show on the second two.

any ideas why?

PS use IE, reason being it will only ever be used in an IE environment.

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

Out of curiosity, why are you doing this? HTML+CSS isn't meant for the creation of original artwork, that task is better suited to SVG. — Dai
– Dai, Commented Jul 12, 2012 at 11:42
it is for a logo that will be used in emails, the reason i can't use an image is because some mail client will block images — Hiky
– Hiky, Commented Jul 12, 2012 at 12:00
If it's for emails then I don't recommend it anyway. Outlook (since 2007) uses Word's HTML rendering engine which is awful. I guarantee these hexagons won't render. The alternative is to include the logo image as an attachment on every email. That way mail clients won't block the images. — Dai
– Dai, Commented Jul 12, 2012 at 12:02
I agree with the previous comment. This approach is just not going to work. Even if it does work, it won't work consistently between different email clients. Use an image. — thirtydot
– thirtydot, Commented Jul 12, 2012 at 12:03
I'll say it to the guys upstairs, i'm just following instructions at the moment. thanks anyway guys — Hiky
– Hiky, Commented Jul 12, 2012 at 12:05

yogi · Accepted Answer · 2012-07-12 11:40:50Z

1

Remove your comment from the css

like  and  they are buggy.

These comments are meant to be in HTML only not for css

for css use this syntax --> /* A comment */

answered Jul 12, 2012 at 11:40

yogi

19.7k13 gold badges67 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahsan Khurshid · Accepted Answer · 2012-07-12 11:40:46Z

0

You have typo in width:50; Add px so it should be width:50px; for .top, .top2, .top3

answered Jul 12, 2012 at 11:40

Ahsan Khurshid

9,4671 gold badge35 silver badges53 bronze badges

1 Comment

Hiky Over a year ago

i noticed that after i posted it but it didn't make a difference :( the top of the second 2 hexagons still dont show.

Collectives™ on Stack Overflow

Creating Hexagons in css / html [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related