CODEWITHSUNDEEP
htmlcss
Umayr
Umayr

Reputation: 933

Overflow doesn't work properly with pure CSS cubes

I have been trying to make a background with pure CSS (Using CSS triangles with the help of border property) and I was successful so far. But there's an overflow issue that's destroying whole thing.

enter image description here

as shown in above image; I want 3rd cube exactly on the right side of 2nd cube (half hidden).

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/

Upvotes: 5

Views: 279

Answers (3)

ScottS
ScottS

Reputation: 72261

Eliminate the Float

Using display: inline-block instead of float with a white-space: nowrap on the wrapping element along with some number tweaking gives you a solid line that does not move and allows for an overflow of the elements. Here is an example fiddle that may still need some slight adjustment on the top and left numbers, but gets close.

Upvotes: 3

Sergio
Sergio

Reputation: 28845

If you add a container div with overflow:hidden and the width you need, AND re-use the section even with width enought for the 3 cubes it should work.

Check here

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

(and div .container is around the code you posted)

  • maybe a min-width could be also an option.

Upvotes: 3

brentonstrine
brentonstrine

Reputation: 22752

Apply this CSS to the rightmost cube that keeps wrapping down:

margin-right: -200px;

Here's a JSFiddle demo: http://jsfiddle.net/brentonstrine/dGLMk/2/. Note, this only solves it if it's the very rightmost one that's overflowing. If you need a solution to an arbitrary number of cubes overflowing, you'll need to set the .cube sections inside a container with overflow: hidden;, as Sergio suggests.

Upvotes: 1

Related Questions