Question

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

Answer 1

从css中删除您的评论

赞和 他们是马车。

这些评论仅适用于HTML，而不适用于css

for css使用此语法 - ＆gt; /* A comment */

Answer 2

您在width:50;添加px时输入了拼写错误，因此width:50px;

应为.top, .top2, .top3

用css / html创建六边形

2 个答案: