Как сделать иконку WI-FI

@Robin32125 · Регистрация: 09.01.2019

Студворк — интернет-сервис помощи студентам

Приветствую, господа верстальщики.

Прошу вашей помощи, нужно сделать аналог такой иконки с помощью CSS свойств (решение должно быть оптимизированным и правильным)

Пытался сделать следующими путями:

HTML5
1
2
3
4
5
6
<div class="recipe__user_stats">
    <div class="colon1"></div>
        <div class="colon2"></div>
    <div class="colon3"></div>
    <div class="colon4"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.recipe__user_stats
{
    display: flex;
    margin-left: 12px;
}
 
.recipe__user_time
{
    margin-left: 4px;
}
 
.colon1
{
    height: 11px;
    width: 5px;
    background-color: #565656;
}
 
.colon2
{
    height: 15px;
    width: 5px;
    background-color: #565656;
    margin-left: 2px;
}
 
.colon3
{
    height: 19px;
    width: 5px;
    background-color: #565656;
    margin-left: 2px;
}
 
.colon4
{
    height: 24px;
    width: 6px;
    margin-left: 2px;
    border: 1px solid #d7d7d7;
}

Буду сильно признателен, спасибо за помощь!

@gogolik · 19.04.2021, 11:13

HTML5
1
2
3
4
5
6
<div class="container">
  <div class="item filled"></div>
  <div class="item filled"></div>
  <div class="item filled"></div>
  <div class="item"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: flex-end;
}
.item {
  width: 4px;
  border: 1px solid black;
}
.item.filled {
  background: black;
}
.item:not(:last-child) {
  margin-right: 2px;
}
.item:first-child {
  height: 10px;
}
.item:nth-child(2) {
  height: 13px;
}
.item:nth-child(3) {
  height: 16px;
}
.item:nth-child(4) {
  height: 19px;
}

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

Как сделать иконку WI-FI

Решение