Как бы вы разработали CSS и HTML, чтобы разделить этот округленный виджет?

Question

У меня есть следующее изображение, которое мне нужно превратить в виджет HTML на моем сайте.

альтернативный текст http://db.tt/lRJq4s

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

Должен ли я срезать углы и иметь верхний левый, верхний правый, верхний средний, средний левый, средний правый, нижний левый, нижний средний, нижний правый? Как будет выглядеть структура div для чего-то подобного?

Мне нужно иметь возможность размещать текст как на верхней, так и на нижней панели, поэтому я подумала об этом подходе. Я поддерживаю IE7, поэтому я думаю, что использование срезов изображений, вероятно, разумно.

Мне действительно любопытно, как бы вы поделили div для создания этой структуры виджетов.

Answer 1

Иметь действительно текучие коробки с тенями и закругленными углами - это боль:

http://dev.meagar.net/misc/2198371153.png

<div class="box">
  <div class="nw">1</div>
  <div class="n">2</div>
  <div class="ne">3</div>
  <div class="w">4</div>
  <div class="e">6</div>
  <div class="sw">7</div>
  <div class="s">8</div>
  <div class="se">9</div>

  <div class="content">5</div>
</div>

• 1-4,6-9 будет располагаться абсолютно по ширине в различных комбинациях сверху: 0, справа: 0, слева: 0, снизу: 0
• 1,3,7,9 будет фиксированной ширины / высоты с неповторяющимся фоном и более высоким z-индексом, чем 2,4,6,8
• 2,8 будет фиксированной высотой, 100% ширины, повторение фона: repeat-x
• 4,6 будет фиксированной ширины, 100% высоты, повторение фона: repeat-y
• 5 будет где ваш контент сидит

Answer 2

Это может оказаться невозможным в зависимости от требований совместимости вашего браузера, но обратите внимание на новую border-image функцию CSS.

Answer 3

Вот как я бы нарезал изображение:

Для углов - 4 квадратных изображения (т.е. 20px x 20px) Каждый угол будет иметь абсолютное позиционирование и z-index: 1 пример: слева вверху осталось бы: 0 сверху: 0 внизу справа будет внизу: 0 справа: 0

top-middle будет 10px x (высота серых полос), который будет повторяющимся фоновым изображением x в CSS

нижняя середина также будет 10px x (высота серых полос) также повторять-x

влево и вправо может быть размером 10px x 10px, что будет повторяться-y

У вас должно быть 3 ряда (верхний средний нижний). Верх и низ не должны содержать каких-либо элементов.

Среднее должно быть 3 деления. Левый средний правый.

Еще одна вещь, которую я хотел бы сделать, - это использовать изображения только для браузеров IE и использовать CSS для создания точно такого же результата. Он будет загружаться намного быстрее и будет меньше HTTP-запросов в современных браузерах, но при этом позволит пользователям, застрявшим в каменном веке на IE6-7, увидеть те же результаты.

Answer 4

Мой прокси может блокировать ваше изображение, поэтому я не вижу его, но если это простой изогнутый угол, используйте кривые углы ...

http://www.curvycorners.net/

В противном случае ябудет делать контейнер и элементы div с левой, центральной и правой границей.