CSS - как сделать такой блок?

программирование дизайн сайт css вэб-дизайн

По ссылке - пример блока, который нужен: http://i.piccy.info/i4/15/07/b1261b17b5bb09feb404f5164bbd.jpeg

Хотелось бы получить его только средствами CSS (без графики и JS). То есть нужен прямоугольный блок со скругленными краями, у которого - центральный заголовок (у заголовка скруглены только два нижних угла). Вот как сделать этот заголовок - никак не соображу. Кто поможет?

Примечание:
Разумеется, внутреннее содержимое динамическое, так же как и текст заголовка

Примечание:
To Spacewalker: Ну что за баранья привычка, лезть во все вопросы подряд, чтоб оставить ссылку? Вы открыли для себя Гугл? Поздравляю! Но вопрос был не "дайте линк на статью о CSS" или вы читать не умеете?

Примечание:
To Spacewalker: Вот видишь, стоило тебя назвать бараном - ты снизошел до ввода текста ;-) О какой правке ссылок речь? Несмотря на то, что гугл зачем-то сделал правку ответов, это не распространяется на вопросы: их по-прежнему можно только дополнять. А чтоб не нарываться на хамство - отвечайте по существу. Меня школьная привычка кидать ссылки вместо ответа - раздражает. Почему-то каждый школьник чтит себя гуру по общению с поисковиками.

To ThomasNeoAnderson: Я не часто занимаюсь дизайном, моя специализация в другом. На разбор реализации - я потрачу намного больше времени чем специалист, для которого это займет, возможно, несколько минут. Так что если для вас все просто - поделитесь кодом. Задавая вопрос я ведь имел ввиду именно это, а не обсуждение насколько понятна/непонятна та или иная статья ;)

Примечание:
To просто Дима: Товарищ Дима, читайте не только вопрос, но и дополнения к нему ;) Я не ищу статей, мануалов, видеолекций и т.п. по CSS. Если мне это понадобится - я знаю как это делается. Еще раз повторяю что мне нужен ответ на конкретный вопрос по реализации, которая приведена на картинке.

Примечание:
Да, не заходило на ВиО около года, а изменения конкретные... Ресурс наводнила школота, способная только на гугление и копи/пэст. Три ответа, в каждом по нескольку правок, в каждом утверждается что задача проще валенка, но... ни строчки кода. Просто Дима, для вас, персонально, повторю в третий раз: я не ищу мануал. Вы же, с непонятным упорством продолжаете (строя из себя гуру) кидать ссылки, хотя я попросил этого не делать. Не можете ответить - проходите мимо, не засирайте полезную площадь обсуждения

Примечание:
To ThomasNeoAnderson: Почти то что нужно. Недостаток - скругление совсем не того радиуса, не работает под IE7 (и видимо прочими IE) и оторвано от подложки (прямоугольника из примера).
Ответы:
Во время твоего вопроса ссылка не открывалась. Так что баран здесь только ты - я дал ответ на твой вопрос в заголовке.
Сделать то, что изображено на рисунке, ссылку на который ты исправил с моей, кстати, подачи, еще проще - но ты давай ищи помощи у других кому небезразлично твое отношение, хамло.
Сначала хотел написать код, но потом посмотрел ссылку - там все подробно написано, в чем проблема реализации?
Используйте опыт Сергея Чикуёнка (в прошлом сотрудник студии Лебедева) для решения этой задачи: http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/ (доступно объясняет для понятливых). Здесь уж совсем минимум графики, справитесь.
КОД ДЛЯ CSS
Только средствами css  сделать такое несложно.
Но работать оно будет только в safari/chrome/firefox.
Если интересно, то вот код:
html
Этот код как раз заточен под IE и движок Мозилы, так что все работает. (не тестировал под оперой и хромом)
Код вам дан - дальше настраивайте


14 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.