5

私は純粋な CSS (border プロパティを使用して CSS 三角形を使用) で背景を作成しようとしてきましたが、これまでのところ成功しています。しかし、全体を破壊するオーバーフローの問題があります。

ここに画像の説明を入力

上の画像に示すように; 2 番目のキューブの右側 (半分隠れている) に 3 番目のキューブが必要です。

CSS:

.cube {
        float: left;
        height:239px;
        width:200px;
    }

        .cube .top {
        }

         .cube .top .high{
                width: 0;
                height: 0;
                border-bottom: 60px solid #46B535;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }
            .cube .top .low {
                width: 0;
                height: 0;
                border-top: 60px solid #46B535;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
            }

        .cube .left {
            float: left;
            position: relative;
            top: -60.7px;
        }

            .cube .left .high {
                width: 0;
                height: 0;
                border-bottom: 60px solid #59BE32;
                border-right: 100px solid transparent;
            }

            .cube .left .mid {
                height: 60px;
                width: 100px;
                background: #59BE32;
            }

            .cube .left .low {
                width: 0;
                height: 0;
                border-top: 60px solid #59BE32;
                border-left: 100px solid transparent;
            }

        .cube .right {
            float: left;
            position: relative;
            top: -60.7px;
        }


            .cube .right .light .up {
                width: 0;
                height: 0;
                border-bottom: 60px solid #27B138;
                border-left: 100px solid transparent;
            }

            .cube .right .light .down {
                width: 0;
                height: 0;
                border-top: 60px solid #27B138;
                border-left: 100px solid transparent;
            }

            .cube .right .dark {
                position: relative;
                top: -61px;
            }

                .cube .right .dark .up {
                    width: 0;
                    height: 0;
                    border-bottom: 60px solid #00AA3A;
                    border-right: 100px solid transparent;
                }

                .cube .right .dark .down {
                    width: 0;
                    height: 0;
                    border-top: 60px solid #00AA3A;
                    border-right: 100px solid transparent;
                }

    .clear {
        clear: both;
    }

    .even {
        clear: both;
        overflow:hidden;
        height:36%;
    }

HTML:

      <section class="even">
        <section class="cube">

            <div class="top">
                <div class="high"></div>
                <div class="low"></div>
            </div>
            <div class="left">
                <div class="high"></div>
                <div class="mid"></div>
                <div class="low"></div>
            </div>
            <div class="right">
                <div class="light">
                    <div class="up"></div>
                    <div class="down"></div>
                </div>
                <div class="dark">
                    <div class="up"></div>
                    <div class="down"></div>

                </div>
            </div>
        </section>
        <section class="cube">

            <div class="top">
                <div class="high"></div>
                <div class="low"></div>
            </div>
            <div class="left">
                <div class="high"></div>
                <div class="mid"></div>
                <div class="low"></div>
            </div>
            <div class="right">
                <div class="light">
                    <div class="up"></div>
                    <div class="down"></div>
                </div>
                <div class="dark">
                    <div class="up"></div>
                    <div class="down"></div>

                </div>
            </div>
        </section>
        <section class="cube">

            <div class="top">
                <div class="high"></div>
                <div class="low"></div>
            </div>
            <div class="left">
                <div class="high"></div>
                <div class="mid"></div>
                <div class="low"></div>
            </div>
            <div class="right">
                <div class="light">
                    <div class="up"></div>
                    <div class="down"></div>
                </div>
                <div class="dark">
                    <div class="up"></div>
                    <div class="down"></div>

                </div>
            </div>
        </section>

    </section>

JSFiddle:

http://jsfiddle.net/dGLMk/

4

3 に答える 3

3

コンテナ div をoverflow:hidden必要な幅で追加し、3 つの立方体に十分な幅があってもセクションを再利用すると、機能するはずです。

ここをチェック

.even {
    width:700px;
}
.container {
    overflow:hidden;
    width:500px;
}

（そして div .container はあなたが投稿したコードの周りにあります）

  • 最小幅もオプションになる可能性があります。
于 2013-07-01T22:24:31.873 に答える