我一直在尝试用纯 CSS 制作背景(在 border 属性的帮助下使用 CSS 三 Angular 形)，到目前为止我是成功的。但是有一个溢出问题正在摧毁整个事情。

如上图所示；我想要第三个立方体恰好位于第二个立方体的右侧(半隐藏)。

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/

最佳答案

消除 float

使用 display: inline-block 而不是 float 并在包装元素上使用 white-space: nowrap 以及一些数字调整给出你是一条不动的实线，允许元素的溢出。 Here is an example fiddle that may still need some slight adjustment on the top and left numbers, but gets close.

关于html - 溢出不能与纯 CSS 多维数据集一起正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17414555/