Создание шестиугольника с элементами списка

Я пробовал несколько вариантов и руководств, однако я имею дело с сайтом Wordpress и могу настроить вывод HTML только для этого навигационного меню ... Как я могу заставить эту работу работать для этих двух пунктов меню в заголовке?

Я имею дело с элементами списка, поэтому это не работает точно так же, как сообщение, за которое я был оштрафован за дублирование. Он имеет дело только с одним элементом, тогда как у меня есть ссылки, обернутые в li, которые являются частью панели навигации, поэтому немного по-другому.

Я хочу этот:

введите описание изображения здесь

а HTML / SCSS, с которым я работаю (безуспешно), находится ниже:

http://codepen.io/anon/pen/wsodI

<ul id="menu-right-menu-buttons" class="right-menu">
<li id="menu-item-8439" class="first-item menu-item-type-post_type menu-item-object-page menu-item-8439"><a href="#">Businesses</a></li>
<li id="menu-item-8438" class="last-menu-item menu-item menu-item-type-post_type menu-item-object-page menu-item-8438"><a href="#">Job Seekers</a></li>
</ul>

.right-menu {
    float: right;

    li {
        display: inline-block;
        position: relative;
        z-index: 9999;
        left: -100px;
        height: 20px; 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent; 
        border-bottom: 100px solid #021e4e;

        a {
            vertical-align: middle;
            position: relative;
            top: 50%;
        }
    }

    li:after {
        position: relative; 
        height: 0px; 
        width: 200px; 
        border-top: 100px solid #021e4e; 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent;
    }
}

css css-shapes
person jflay    schedule 26.08.2014    source источник
comment
css-tricks.com/examples/ShapesOfCSS Прокрутите до места, где написано шестиугольник.   -  person Jakotheshadows    schedule 26.08.2014
comment
пробовал это уже, и попытался повернуть его соответствующим образом, чтобы он соответствовал моим требованиям к форме ... он вообще не выходит правильно. Другая проблема - попытаться получить эту белую рамку поверх формы ...   -  person jflay    schedule 26.08.2014
comment
См. Здесь - stackoverflow.com/questions/25445118/   -  person Paulie_D    schedule 26.08.2014
comment
Взгляните на мое обновление с границами шестиугольника, если это то, что вы ищете   -  person Carlos Calla    schedule 26.08.2014
comment
не забудьте принять ответ   -  person codedude    schedule 27.08.2014

Ответы (3)


arrow_upward
4
arrow_downward

Вы можете создать треугольник с помощью свойства границы. Вы видите обычное поле, подобное этому, если оно имеет высоту 30 пикселей и ширину 30 пикселей и некоторую границу, давайте дадим ему границу 5 пикселей

введите описание изображения здесь

Теперь вы видите, как формируются края границ, затем вы можете просто задать ему высоту 0 и ширину 0, и у вас будет одна сторона трапеции, образованная границами, с длиной 0, так что у вас есть треугольник. Нравится

введите описание изображения здесь

Tha T обозначает верхнюю границу, B - нижнюю границу, R - границу боя и L - левую границу. Теперь вы просто задаете цвет границы. У вас может быть R с красным цветом, а остальные - белым, и у вас будет треугольник, указывающий влево. То же самое с границей L.

Теперь вы можете использовать div как обычный прямоугольник и использовать псевдоселекторы: after и: before, чтобы придать ему некоторую границу и сделать ваши два треугольника в начале и в конце, и у вас будет шестиугольник

См. Jsfiddle, я создал для вас exagon с черной рамкой, чтобы заметить, где находится граница: http://jsfiddle.net/carloscalla/o742jd86/

См. Границы в #hexagon:after и #hexagon:before

Вот результат:

введите описание изображения здесь

ОБНОВЛЕНИЕ: если вам нужны границы, вы можете просто перекрыть один шестиугольник другим, как в этом jsfiddle в чистом CSS: http://jsfiddle.net/carloscalla/o742jd86/1/

введите описание изображения здесь

Вот два других варианта, которые вы можете получить, работая только с одним элементом. Я взял их из другого ответа, чтобы показать здесь лучшие варианты

http://codepen.io/hari_shanx/pen/tsLza

http://codepen.io/anon/pen/sKamk

введите описание изображения здесь

person Carlos Calla    schedule 26.08.2014
comment
ОП явно знает об этой технике и использовал ее. - person Paulie_D; 26.08.2014
comment
Я не получаю вашего отрицательного голоса, вы просто сосредотачиваетесь на том, чтобы беспокоить людей. Вы можете заставить людей голосовать против вас. Было бы обидно - person Carlos Calla; 26.08.2014
comment
Да, но я не голосовал против. - person Paulie_D; 26.08.2014
comment
Парень применил эту технику, но у него были трапеции, а не шестиугольники, поэтому я объяснил ему это, чтобы он мог понять это и получить шестиугольник. Я также создал jsfiddle, чтобы показать ему шестиугольник, так что я думаю, это неплохой ответ. - person Carlos Calla; 26.08.2014

arrow_upward
2
arrow_downward

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

введите описание изображения здесь

http://jsfiddle.net/bc9a5Lof/2/

HTML:

<div id="hexagon"><div class="inner">Job Seekers</div>    </div>

(Обратите внимание, что я добавил div внутри поля ссылки. Это необходимо для получения белой границы.)

и CSS:

body {
    padding:100px;
    background:#aaa;
}
#hexagon {
    display:inline-block;
    height: 54px;
    padding:3px 0;
    background:#fff;
    position: relative;
}
#hexagon .inner {
    display:inline-block;
    height: 54px;
    padding:0 20px;
    background: #021E4D;
    position: relative;
    color:#fff;
    font:16pt/54px Arial;
}
#hexagon:before {
    content: "";
    position: absolute;
    left: -20px;
    top:0;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 20px solid #fff;
}
#hexagon:after {
    content: "";
    position: absolute;
    right: -20px;
    top:0;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 20px solid #fff;
}
#hexagon .inner:before {
    content: "";
    position: absolute;
    left: -17px;
    top:1px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-right: 17px solid #021E4D;
}
#hexagon .inner:after {
    content: "";
    position: absolute;
    right: -17px;
    top:1px;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 17px solid #021E4D;
    z-index:100;
}

Не стесняйтесь задавать мне любые вопросы. :)

person codedude    schedule 26.08.2014
comment
и ваш, и Карлос были очень полезны, спасибо, что указали мне в правильном направлении! - person jflay; 30.08.2014

arrow_upward
0
arrow_downward

Вы можете использовать программирование холста HTML5 для рисования и заполнения.

Лучшая структура, которую я использую, она отзывчивая и легкая, вы получите все функции Bootstrap на 12 КБ (в архиве), и ее легко понять. Вы также получите скорость 100 страниц на мобильных устройствах.

Проверьте это: http://skhost.in/one

Нажмите ниже, чтобы проверить скорость:

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fskhost.in%2Fone&tab=desktop

person Sreenivasula Reddy    schedule 26.08.2014