Уголки и рамки на CSS

В данной заметке показаны варианты оформления информационных блоков при помощи уголков и рамок. Например, загнутый уголок, ленточка на блоке, картинная рамка и другие.

Все примеры адаптивны и могут быть любой высоты и ширины.

Уголки с hover-эффектом:

Текст

Загнутый уголок:

Текст

Закругленные уголки:

Текст

Аналогичный вариант, но с использованием радиального градиента, можно посмотреть в теме "Внутренний border-radius у блока"

Врезанные в фон уголки:

Текст

Информационный уголок:

i
Текст - 2
Текст

Уголок-ленточка:

лента
лента
Текст

Картинная рамка 1:

Текст

Картинная рамка 2:

Текст

Смотрите также:

Блоки из фигур на CSS

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

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Александр:

    как в 1 убрать два уголка?

    Ответить
    • Alexander:

      Какие именно?
      Уголки сделаны по принципу, что на обычный бордюр накладывается белый (в цвет фона) крест, который закрывает центральную часть всех бордюров. А при ховере, этот крест уменьшается и соотв. показывается больше бордюра, создавая впечатление, что он увеличивается.
      Задайте этому кресту черный цвет (чтобы было видно его) и экспериментируйте, двигая его куда угодно в начальном положении и при наведении мыши.

      Ответить
  • Николай:

    А на белом фоне как сделать?

    Ответить
  • Владислав:

    Спасибо, воспользовался загнутый уголок

    Ответить