5

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

在此处输入图像描述

如上图所示；我想要第三个立方体正好在第二个立方体的右侧（半隐藏）。

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>

JSF中：

http://jsfiddle.net/dGLMk/

4

3 回答 3

3

消除浮动

在包装元素上使用display: inline-block而不是float使用 awhite-space: nowrap以及一些数字调整会给您一条不移动的实线并允许overflow元素中的一个。这是一个示例小提琴top，可能仍需要对和数字进行一些微调left，但会接近。

于 2013-07-01T22:37:41.547 回答
3

如果您添加一个具有overflow:hidden所需宽度的容器 div，并重新使用该部分，即使宽度足以满足 3 个立方体的要求，它也应该可以工作。

在这里检查

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

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

  • 也许最小宽度也是一种选择。
于 2013-07-01T22:24:31.873 回答
1

将这个 CSS 应用到最右边的立方体上：

margin-right: -200px;

这是一个 JSFiddle 演示：http: //jsfiddle.net/brentonsrine/dGLMk/2/。请注意，只有当它是最右边的溢出时才能解决它。如果您需要解决任意数量的立方体溢出问题，您需要按照 Sergio 的建议.cube在容器内设置部分。overflow: hidden;

于 2013-07-01T22:34:39.897 回答