0

私はcss/htmlにいくつかの六角形を作成して、次のようにしようとしています。

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

今、私は1つの六角形を作成し、それを他の2回コピーしようとしましたが、上部が2番目の2つに表示されていないようです。

なぜ何かアイデア？

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 に答える