Многоугольные Отделения — Делающий переполнение содержания в определенной форме?

Вот сайт, я в настоящее время продолжаю работать: http://willcrichton.net/

При нажатии на стрелки на каждой стороне шестиугольника в середине Вы видите, что это переходит левое и правое использование jQuery + Цикл jQuery + Упрощение jQuery. Однако можно также видеть, что это довольно ужасно - потому что я использую шестиугольники и не квадраты и потому что отделения квадратной формы, перекрытия шестиугольника содержания с с фоном неприятным способом.

Так, мой вопрос: как я по существу взломал бы отделение шестиугольник? Тот шестиугольник должен быть тем же размером/формой отделения содержания, и когда содержание вне области шестиугольника, это должно быть невидимо.

Править:

HTML

CSS

/* Container styles */

#container {
    width: 908px;
    height: 787px;
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -393.5px;
    margin-left: -452px;
    background-image: url("images/background.png");
    font: 12px "Lucida Sans Unicode", "Arial", sans-serif;
    z-index: 3;
}    

#content {
    width: 686px;
    height: 598px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -282px;
    margin-left: -343.5px;
    /*background-image: url("images/hacky_hole2.png");*/
    z-index: 1;
}

    .slide {
        width: 100%;
        height: 100%;
        background-image: url("images/content.png");
        position: relative;
        z-index: 2;
    }

ОБНОВЛЕНИЕ: при проверке сайта теперь Вы видели бы мою неудачную попытку при использовании метода "окна", и Вы видите, почему z-индекс не работал.