Question

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

enter image description here

如上图所示;我希望第三个立方体恰好位于第二个立方体的右侧（半隐藏）。

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/

Answer 1

如果你添加一个带有overflow:hidden的容器div和你需要的宽度，并且重新使用该部分，即使它应该有3个立方体的宽度，也应该有效。

检查here

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

（并且div .container在您发布的代码周围）

也许最小宽度也可以是一种选择。

Answer 2

消除浮动

在包装元素上使用display: inline-block代替float并使用white-space: nowrap以及一些数字调整为您提供一条不移动的实线并允许overflow的元素。 Here is an example fiddle that may still need some slight adjustment on the top and left numbers, but gets close.

Answer 3

将此CSS应用于最右边的多维数据集：

margin-right: -200px;

这是一个JSFiddle演示：http://jsfiddle.net/brentonstrine/dGLMk/2/。注意，这只能解决它，如果它是最右边的溢出。如果您需要解决任意数量的多维数据集溢出问题，则需要使用.cube在容器内设置overflow: hidden;部分，如Sergio建议的那样。

使用纯CSS多维数据集时溢出无法正常工作

3 个答案:

消除浮动