Как сделать CSS-флажок для сайта

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

Нам понадобится стилевой класс-обёртка, назовём его flagbox, и класс для самого флажка flag. Текст на флажке будем отображаться в элементе <span>, вложенном в раздел с классом flag.

Из приведённого ниже стиля CSS видно, как мы позиционируем флажок в правом верхнему углу страницы, на всякий случай свойством z-index сдвигаем его "ниже" основного слоя контента, с помощью фильтра drop-shadow() делаем флажку тень, а свойство clip-path, которое сегодня поддерживается уже достаточно широко, позволит нам дать флажку форму, отличную от прямоугольной.

<style>
 .flagbox {
  width: 100%;
  position: relative; /* только как обёртка флажка */
  z-index: -1; /* ниже основного слоя */
 }
 .flag {
  position: absolute;
  right: 1%; /* справа */
  top: 3px;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.75)); 
   /* тень с трёх сторон, кроме левой */
 }
 .flag span {
  display: block;
  color: #fff; /* цвет текста */
  background: #dc143c; /* цвет фона */
  width: 40px;
  line-height: 50px; /* влияет на высоту */
  font-size: 16px;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 39% 100%, 0 75%);
   /* путь обрезания с левого верхнего угла по часовой стрелке */
  user-select: none; /* текст на флажке не выделяется */
 }
</style>

Разметка HTML для флажка будет совсем простой. Мы дали элементу <span> идентификатор на случай, если будем обновлять его содержимое динамически.

<div class="flagbox">
 <div class="flag"><span id="flag1">123</span></div>
</div>

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

Теперь все три фрагмента можно вставить в соответствующие файлы вашего шаблона или движка сайта, а ещё проще сохранить их в отдельный файл типа .html (например, flag1.html, сохранённый во вложенной в основную папку сайта папке pages) и подключить флажок к PHP-движку одной строкой кода вида

<?php require_once('./pages/flag1.html'); ?>

Что вышло - вы можете видеть в правом верхнему углу этого блога, но я надеюсь, что эта картинка будет здесь не всегда, поэтому вот скриншот уголка пустого окна браузера:

Флажок на пустой странице, фрагмент окна браузера

02.10.2022, 12:52 [426 просмотров]