Поместить заголовок в разделительную панель

Как и в случае с тегом legend в поле, текст помещается на правило разделения, а фон под текстом стирается.

Это позволяет разделить два раздела страницы, сводя к минимуму использование пространства.

Совместимость: IE6 +, Chrome, Firefox, Safari.

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

Демонстрация :

HTML-код:

<div class="bartext"><div>Salut le Monde!</div></div>

Код CSS:

.bartext {
  height:8px;
  width:100%;
  padding:0px;
  background:#333;
  overflow:visible;
  position:relative;
  margin-top:24px;
}
.bartext div {
  color:#333;
  background-color:#FFFFFF;
  top:-5px;
  margin-left:100px;
  padding: 0 8px 8px 8px;
  display:inline;
  position:absolute;
}

Можно изменить цвет строки и текста, толщину полосы со свойством height, позицию текста, заданную свойством margin-left.
Если вы хотите центрировать текст, вы будете использовать текст: center в правиле .bartext и удалить margin-left в .bartext div .

Скругление концов полосы

Просто добавьте свойство border-radius в правило .bartext.

border-radius:8px;

Вот результат:

Или дать ему скос

Приведенный ниже пример представлен в чистом CSS:

Этот эффект сложно реализовать в чистом CSS, и для его получения нужно добавить маяк.

<div class="slantdiv"></div>
<div class="barslant"><div>Salut le Monde!</div>
<br>

Вот код CSS :

.barslant {
  padding:0px;
  overflow:visible;
  position:relative;
  background:#333;
  height:0;  
  line-height:16px;  
  margin-top:0;
  width:90%;		
}
.barslant div {
  background-color:#FFFFFF;
  margin-left:100px;
  padding:0 8px 8px 8px;
  display:inline;
  position:absolute;
  color:#000;
  top:-12px;
}
.slantdiv {
  width:96%;
  height:0px;
  border-bottom:8px solid #333;
  border-right:8px solid white;
  margin-top:24px;
}

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

Если вы хотите использовать этот виджет на фоне страницы, который является изображением, на jsfiddle представлено другое решение. Также имеет преимущество, что в HTML-коде необходим только один тег. Но и у нее есть свои недостатки. Расположить текст с левой или правой стороны практически невозможно. Настраивать планку, как это было сделано выше, тоже невозможно. Совместимость также ограничена IE начиная с версии 8.

На домашней странице вы найдете другие трюки для создания графических эффектов без изображений.

Лицензия: Вы можете использовать этот код для презентации своих страниц без ограничений. Не повторяйте содержание этой страницы или код в качестве темы других онлайн-учебников. Данная лицензия распространяется на все содержимое сайта.