0

こんにちは、誰かこの問題を解決してくれませんか。これらの 3 つの六角形を少し回転させる必要があります。15度前後です。Internet Explorer でのみ動作する必要があります。私は一日中これに頭を悩ませていて、とてもイライラしています. ありがとう。

<html>
<head>

 <style type="text/css">

    .top 
                {
        height:0px;
        width:0px;
        display: block;
        border:50px solid #606060;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:#606060;
        border-left-color:transparent;
                                //transform: rotate(30deg);
    }

    .middle 
                {
        height: 50px;
        background: #606060;
        width: 100px;
        display: block;
                                //transform: rotate(30deg);
    }

    .bottom
                {
        height:0px;
        width:0px;
        display: block;
        border:50px solid #606060;
        border-top-color:#606060;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:transparent;
                                // transform: rotate(30deg);

    }

    .top2 
                {
        height:0px;
        width:0px;
        display: block;
        border:50px solid red;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:red;
        border-left-color:transparent;
                                //transform: rotate(30deg);
    }

    .middle2 
                {
        height: 50px;
        background: red;
        width: 100px;
        display: block;
                                //transform: rotate(30deg);
    }

    .bottom2 
                {
        height:0px;
        width:0px;
        display: block;
        border:50px solid red;
        border-top-color:red;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:transparent;
                                // transform: rotate(30deg);

    }

                .top3 
                {
        height:0px;
        width:0px;
        display: block;
        border:50px solid #C0C0C0;
        border-top-color:transparent;
        border-right-color:transparent;
        border-bottom-color:#C0C0C0;
        border-left-color:transparent;
                                //transform: rotate(30deg);
    }

    .middle3 
                {
        height: 50px;
        background: #C0C0C0;
        width: 100px;
        display: block;
                                //transform: rotate(30deg);
    }

    .bottom3
                {
        height:0px;
        width:0px;
        display: block;
        border:50px solid #C0C0C0;
        border-top-color:#C0C0C0;
        border-right-color:transparent;
        border-bottom-color:transparent;
        border-left-color:transparent;
                                // transform: rotate(30deg);

    }



 </style>
</head>
<body>

 <div class="hexagon"style="position: absolute; top: 0px; left: 10px;">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>

</div>
<!-- GREEN -->
 <div class="hexagon3" style="position: absolute; top: 110px; left: 65px;">
    <span class="top3"></span>
    <span class="middle3"></span>
    <span class="bottom3"></span>

</div>
<!-- black-->
 <div class="hexagon2" style="position: absolute; top: 0px; left: 120px;">
                <span class="top2"></span>
    <span class="middle2"></span>
    <span class="bottom2"></span>

</div>



</BODY

</html>
4

1 に答える 1

0

Explorer での変換の CSS は次のとおりです。

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9659258262890683, M12=-0.25881904510252074, M21=0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');
zoom: 1;

このページを見てくださいhttp://css3please.com/

于 2012-07-12T15:51:38.190 に答える