0

我试图在 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>
4

2 回答 2

1

从 CSS 中删除您的评论

喜欢<!-- Second Hex-->，<!--hex 3--> 他们是越野车。

这些评论HTML仅用于css

对于 css 使用这个语法 -->/* A comment */

于 2012-07-12T11:40:50.543 回答
0

width:50;您在Add中有错字，px所以它应该width:50px;是.top, .top2, .top3

于 2012-07-12T11:40:46.180 回答