Оформление горизонтальной линии HR с использованием CSS

---

Здравствуйте друзья и читатели. Сегодня я вернусь к оформлению горизонтальных линий. Для каждого варианта оформления пропишу стиль CSS. Читайте, реализуйте в своих блогах, пишите отзывы и пожелания. Также посмотрите мои ранние посты:

• Разделительные линии для текста с настройкой размера и цвета;
• Рамки разной толщины границ и формы окантовки;
• Оформление, выравнивание, убрать под кат текст в блоге;

Начнем с самого простого оформления

---

<style>hr {border: 0; border-bottom: 7px dashed #03b4cc;background: #006400;}</style>

<style>hr {border: 0; border-bottom: 9px double #006400;background: #ff9900;}</style>

<style>hr {border: 0; box-shadow: 0 0 10px 1px #03b4cc;}</style>

Можно изменить цвет, форму и размер рамки. Стили CSS установить дизайн-добавить гаджет, сохраните внизу макета блога, или тема (шаблон) в разделе CSS выше строки </b:skin>, только без тэга <style></style>.

Далее, смотря где нужно установить линию: под заголовком, меню, над/под сообщением, подчеркнуть текст и.т.д, нажмите добавить гаджет HTML, в поле впишите <hr>, сохраните. 

Если нужно выделить линией текст или изображение в статье, в редакторе перейти в HTML и также вписать <hr> в нужном месте текста.

Добавим к линии треугольники:  

<style>hr {
border: 0;
border-bottom: 7px dashed #03b4cc;
background: #006400;
}
 hr::after {
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 10px solid transparent; /* Прозрачные границы */
    border-top: 10px solid #008000; /* Добавляем треугольник */
  }
hr::before {
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 10px solid transparent; /* Прозрачные границы */
    border-top: 10px solid #008000; /* Добавляем треугольник */
  }
</style>

<style>hr {
border: 0;
box-shadow: 0 0 10px 1px #006400;
}
 hr::after {
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
   }
 hr::before {
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
   }
</style>

<style> hr {
border: 0;
box-shadow: 0 0 10px 1px #006400;
}
hr::after {
    content: '';
    position: absolute; /* Абсолютное позиционирование */
    left:50% ; bottom: -20px; /* Положение треугольника */ 
    border: 20px solid transparent;  /* Прозрачные границы */
    border-bottom: 70px solid 04af37; border-top: 20px solid #03b4cc;
    border-bottom: 70px solid 04af37; border-bottom: 20px solid green;
   }
</style>

<style>hr {border: 0;box-shadow: 0 0 10px 1px #03b4cc;}
hr::after { content: '';
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #03b4cc; /* Добавляем треугольник */ }</style>

<style>hr {border: 0;box-shadow: 0 0 10px 1px #800080;}
  hr::after { content: '';
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent;  /* Прозрачные границы */
    border-bottom: 70px solid 855e42; border-right: 20px solid #8b008b;
    border-bottom: 70px solid 855e42; border-left: 20px solid #8b008b;}</style>

<style>hr {border: 0; border-bottom: 7px dashed #ff9900;background: #006400;}
hr::after { content: '';
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -15px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-left: 20px solid #006400; /* Добавляем треугольник */ }</style>

Тестируйте свои идеи оформления. Задавайте вопросы, в блоге работает контактная форма и поле комментариев к Вашим услугам. Всего доброго.

Выбрать цвет по ссылкам:

• RGB и HEX коды цветов Название цвета на английском языке;
• Безопасные коды цветов для использования в дизайне сайта;

Рекомендуемый контент: