Polygonal Divs - Создание содержимого переполнения в определенной форме?

Question

Вот сайт, над которым я сейчас работаю: http://willcrichton.net/

Если вы нажмете на стрелки на каждой стороне шестиугольника посередине, вы увидите, что он перемещается влево и вправо с помощью jQuery + jQuery Cycle + jQuery Easing. Тем не менее, вы также можете видеть, что это довольно уродливо - потому что я использую шестиугольники, а не квадраты, и поскольку div имеют квадратную форму, содержимое шестиугольника накладывается на фон неприятным способом.

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

Редактировать:

HTML

<div id="content"> 
<div class="slide">

    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

    <div id="websites-title"></div>
    <div class="website">

    </div>
</div>
<div class="slide">
    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

</div></div>


<script type="text/javascript">
    $("#content").cycle({
        fx: 'scrollHorz',
        timeout: 0,
        prev: ".left",
        next: ".right",
        easing: "easeInOutBack"
    });
</script>

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-index не работал.

Answer 1

Вы не можете превратить деление в шестиугольник, но вы можете использовать PNG-файлы с альфа-прозрачностью, чтобы замаскировать нужную область. Итак, вам нужно будет сделать четыре деления, каждый с фоном, который имеет файл PNG с прозрачностью, которая действует как маска. Эти элементы будут расположены над ползунком с помощью ползунка.

РЕДАКТИРОВАТЬ: Как отметил Пекка ниже, это также можно сделать с помощью одного большого файла PNG, действующего в качестве маски.

РЕДАКТИРОВАТЬ # 2: Глядя на код, который вы разместили, я бы пересмотрел его так:

<div id="content"></div>
<div class="slide">

    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>

    <div id="websites-title"></div>
    <div class="website">

    </div>
</div>
<div class="slide">
    <a href="#"><div class="arrow left"></div></a>
    <a href="#"><div class="arrow right"></div></a>
</div>

Обратите внимание, что я закрыл элемент <div id="content">. Этот элемент должен быть одним из ваших слайдов, но располагаться над слайдами с более высоким z-индексом. Или вам может понадобиться создать новый элемент, предназначенный для отображения маски, если ваш div «content» используется для других целей, а не только для отображения маски.

Answer 2

Эрик Мейер Curvelicious концепция и демо может указать вам правильное направление Это сложный взлом с «ранних дней CSS», но это мощная техника.

Answer 3

Если бы я развивался, я бы превратил вашу двухслойную связь в древовидный слой ...

например:

1. Слой с существующим фоном

2. Слой с серым шестиугольником

3. Слой с окружающими словами и окружающим фоном

Подобным образом, когда вы нажимаете стрелки влево и вправо, серый шестиугольник заставит меня скользить по середине слоев 1. и 3., тем самым предотвращая упомянутое вами безобразие

Надеюсь, это поможет!