нужна помощь в отображении меню WordPress творчески

Question

Я получил дизайн сайта WordPress, и мне нужно создать меню как прикрепленное изображение. Я думал о повторении фона черного "/" и имен категорий / страниц с белым фоном, но я думаю, что это не будет хорошо выглядеть Я думал о том, чтобы иметь функцию, которая заполняет черное "/", но понятия не имел, как начать. Любая идея будет высоко ценится. Спасибо ! (пожалуйста, игнорируйте синие линии).

Answer 1

@ Шир; создайте / изображение для фона, и вы можете использовать его вот так

например

ul{
    list-style:none;
    float:right;
}
ul li{
    background:url(tile.jpg) repeat-x;
    width:100px;
    font-family:verdana;
    font-size:14px;
    margin-bottom:5px;
    text-align:right;
}
ul li a{
    background:red;
    text-decoration:none;
    color:yellow;
}

отметьте это http://jsfiddle.net/sandeep/Dfjvm/ пример, в котором использовать изображение Google в качестве пустышки. да поможет вам это.

Answer 2

Я думаю, что мозаичный фон был бы подходящим вариантом, но на самом деле вам нужно было бы использовать три изображения, чтобы он выглядел правильно.

Итак, если вы сделаете это меню в виде списка, вы можете дать каждому <li> css text-align: right;background:url(slashes.jpg);

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

Вы могли бы задать <a> отступ слева от 10px и иметь правый белый треугольник в качестве выровненного по левому краю неповторяющегося фона.

Затем внутри каждого <li> вы можете добавить небольшой элемент div или другой элемент, который является полной высотой li, с плавающей точкой слева, а фоновое изображение будет элементом левой стороны. Таким образом, у вас будут только полные диагональные линии, а не ломаные. Впрочем, диагональная линия может иметь непоследовательную ширину. Можно было бы предотвратить это, используя моноширинный шрифт и межбуквенный интервал в css, чтобы гарантировать, сколько горизонтали занимает каждая буква в ваших ссылках. Например, вы можете сделать формулу для (1 буква = 2 слеш)