Верстка небольшого блока

[beliy]

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

Следовательно у меня есть несколько вопросов к знатокам по данному макету:

1) Насколько реализуема и уместна верстка косых углов на чистом css?

2) Как сделать разделитель меню через border-right, дабы он соответствовал макету? Насколько это оправданно?

3) Как бы вы сверстали этот блок (желательно пример кода)?

 

 

Заранее благодарю за  вашу помощь...

[ShumNo]

немного переделал ваш вариант
http://jsfiddle.net/wxu5kxjv/

[rus]

если делать на css, то будет не во всех браузерах, а точнее не в любой версии ИЕ.

углы - это всякие :after или :before

а бордеры можно - :first-child и :last-child

в общем копал бы наверное в этом направлении.

[ShumNo]

Ход движения мыслей:
1. div + after и before для косых углов - делал бы конечно с помощью стилей

2. внутри div ссылки - у последней ссылки last-child с border:none;

[beliy]

если делать на css, то будет не во всех браузерах, а точнее не в любой версии ИЕ.

углы - это всякие :after или :before

а бордеры можно - :first-child и :last-child

в общем копал бы наверное в этом направлении.

 

по поводу углов, то есть несколько вариантов реализации. Из тех что я знаю -  с помощью transform и с помощью свойства transparent для border. Какой конктретно вы имели ввиду?

Как бы вы верстали этот блок в своем проекте, если б не было задачи делать именно на чистом css? Можете показать пример кода, как бы вы его делали?

 

В данный момент получилось сделать так - http://dabblet.com/gist/662709472c5c36036d3e  ,но мне кажется что это достаточно грубое решение и я не уверен в его кросбраузерности... Поэтому и интересуюсь как сделали б этот блок профессионалы...

Ход движения мыслей:

1. div + after и before для косых углов - делал бы конечно с помощью стилей

2. внутри div ссылки - у последней ссылки last-child с border:none;

 

можете показать небольшой пример как бы именно вы делали этот блок? То что получается на данный момент выложил по ссылке выше, но как писал выше, для меня как новичка важно выделить оптимальные решения для конкретных задач, поэтому и прошу показать как делали б вы этот блок. Или хотя бы проанализировать, то что получается на данный момент с возможными советами по оптимизации... Спасибо.

Edited December 5, 2015 by beliy

[beliy]

@ShumNo, спасибо большое, списки там были действительно не нужны. Но можете прокомментировать почему абсолютное позиционирование оказалось более предпочтительным для вас чем position: relative и отрицательный top? Дело в том что я всегда старался максимально избегать абсолютного позиционирования, особенно в блоках которые будут адаптироваться к ширине экрана (адаптивная верстка). Мне казалось что с relative в этом плане проще, т.к. он привязывается к координатам предыдущего блока. Заранее благодарю за комментарий. И извините за мое количество вопросов...

[ShumNo]

Там абсолютное позиционирование только для уголков - сам блок с ссылками идет в потоке. Отрицательный top я для таких вещей не использую, если у меня текст не лезет в отведенное ему пространство, то я считаю, что верстка была неудачной и делать костыль ввиде top:-6px; не мой стиль. В абсолютном позиционировании нет ничего плохого, если он используется к месту, в моем примере как я уже сказал выше абсолют только внутри блока, а значит адаптивности помешать не должен.

 

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

А форум для того и существуют, чтобы задавать вопросы и получать ответы

[beliy]

@ShumNo, Спасибо