Как это сверстать?

Question

[Ярослав IKARUS]

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


Как бы её так сверстать чтобы при этом не требовалось сильно гадить HTML? В идеале бы HTML вообще не трогать, оставить его чистеньким. У меня он имеет вот такой вид.

<div class="place">
	<div class="top">
		<h3>Публикации</h3>
		<ul>
			<li>Последние</li>
			<li>Лучшее</li>
			<li>Популярное</li>
		</ul>
	</div>
	<!-- ну и так далее -->					
</div>

Думаю попробовать сделать какое нибудь извращение с :after и :before псевдоэлементами, но все равно как то не очень понятно как именно это лучше сделать.

Comments

[Mikhail Osher]

Ярослав IKARUS: прочитав Ваш вопрос - я не нашел проблемы. Поставьте вопрос более корректно.

[Ярослав IKARUS]

Mikhail Osher: меня смущают две вот эти детали. dl1.joxi.net/drive/0012/2153/821353/151119/2011bfc... То есть понятно что можно это сделать на псевдоэлементах, но это как то через жопу.

[Михаил Чирский]

Развели холивар тут, а вообще почему вас пугает ::after ::before? если это через жопу, то как же тогда JS который лепят везде, где он не нужен, это не через жопу? а вообще, вы зря паритесь, ваша цель сделать как на макете, 1 шаг сделать любыми способами, 2 шаг сделать как вы сказали не "через жопу" подсказки вам дали, вперед. А грубить тут не стоит, быдла и так хватает

Answer 1

[Cdelphi78]

если вы про вкладки то наверно наиболее простой способ написать js скрипт