В этой статье будут продемонстрированы следующие подходы:
- Метод 1: рисование галочки/галочки с использованием свойств CSS
- Способ 2: вставка галочки/галочки с использованием символов Unicode
Метод 1: рисование галочки/галочки с использованием свойств CSS
Чтобы нарисовать символ галочки, первое требование состоит в том, чтобы визуализировать, как галочка будет выглядеть в конце, потому что ее можно создать в любом цвете, размере или форме. Лучше будет понять это на примере.
Пример
Например, разработчик хочет нарисовать простую галочку зеленого цвета, используя свойства стиля CSS, и отобразить ее в центре интерфейса. В HTML-коде необходимо создать « <дел> » элемент контейнера с « идентификатор ” или “ сорт ”:
< див идентификатор '=' 'галочка' >< / див >
В приведенном выше HTML-операторе « див » был добавлен элемент с идентификатором, объявленным как « галочка ».
При стилизации элемента с помощью свойств CSS добавьте « идентификатор », чтобы обратиться к элементу HTML, а затем указать свойства внутри него:
#галочка
{
трансформировать: вращать ( 45 градусов ) ;
высота : 45 пикселей;
ширина : 20 пикселей;
поле слева: пятьдесят %;
нижняя граница: 9 пикселей сплошной темно-оливково-зеленый;
граница справа: 9px сплошной темно-оливково-зеленый;
}
Приведенный выше элемент стиля CSS имеет следующие свойства:
- “ преобразование: поворот (45 градусов) ” поворачивает прямые вертикальные и горизонтальные линии таким образом, что образует форму символа галочки.
- “ высота » устанавливает высоту символа галочки на « 45 пикселей ».
- “ ширина ” свойство делает символ “ 20 пикселей ' широкий.
- “ поле слева » выравнивает символ галочки по центру интерфейса веб-страницы.
- После этого « нижняя граница ' и ' граница справа » свойства задают толщину границ обеих линий как « 9 пикселей ' и определить ' темно-оливково-зеленый ” для обеих линий, образующих полный символ галочки.
Это создаст зеленую простую галочку или символ галочки, отображаемый в центре интерфейса веб-страницы. 45 пикселей 'высокий' и ' 20 пикселей ' широкий:
Способ 2: вставка галочки/галочки с использованием символов Unicode
Существуют также некоторые символы Unicode, которые автоматически вставляют символы галочки в вывод без необходимости стилизации и определения для них значений параметров. Например, символ Юникода « U+2713 ” помогает добавить в вывод простой символ галочки. Точно так же символ Юникода « U+2713 ” помогает вставить в вывод белую жирную галочку. Чтобы узнать, как добавить эти символы Unicode в документ HTML с помощью полного руководства, щелкните здесь .
Заключение
Флажок или символ галочки можно нарисовать, сначала создав элемент HTML с идентификатором или классом, а затем добавив селектор идентификатора или класса в элемент стиля CSS для ссылки на этот элемент. Чтобы создать форму галочки/галочки в интерфейсе веб-страницы, можно использовать различные свойства CSS, такие как « высота », « ширина », « вращать ' и ' цвет ” можно использовать в зависимости от типа и размера галочки, которую вы хотите. В этом блоге демонстрируется метод рисования галочки/галочки с помощью CSS.