Создание «выпуклого» блока


Привет :)
Нужно сделать "выпуклый" div (некие изогнутые грани div'а, вместо обычных прямых). Примерные наброски таких блоков на картинке выше. Самостоятельно получилось сделать нужный эффект только снизу и сверху блока. Однако слева и справа не получается. Ниже код.

HTML код
<div class = "top_small_ava_corners">
</div>


CSS код
.top_small_ava_corners{
  -moz-border-radius: 5em/0.5em; /* Firefox */
  -webkit-border-radius: 5em/0.5em; /* Safari, Chrome */
  -khtml-border-radius: 5em/0.5em; /* KHTML */
  border-radius: 5em/0.5em; /* CSS3 */
  behavior: url(border-radius.htc); /* IE border-radius */
}


Подскажите, как сделать со всех сторон такой эффект?

1 ответов


Делаем SVG-файл, ставим его на бэкграунд вашего блока, растягиваем бэкграунд на 100% в обе стороны.


border-image

Буквально сегодня об этом в очередной раз напоминал @pepelsbey на очередной конференции WSD.