Мобильная версияЯ пытаюсь создать приведенный ниже макет с помощью CSS. Я близок, как показано в фрагменте кода. Но сделаны следующие изменения, и когда я пытаюсь их внести, все идет наперекосяк.
[*]ярлыки не отображаются [*]разделители должны находиться внутри термометра. [*]цифру «36» и указатель необходимо переместить в соответствии с индикатором выполнения. [*]Обратная раскраска. mix-blend-mode: разница; может работать, но дает странный бежевый цвет вместо черного или белого.
тело * { размер коробки: граница-коробка; } тело { цвет фона: синий; } #действительный { размер шрифта: 40 пикселей; белый цвет; } #термометр { граница: 4 пикселя, сплошная серая; ширина: 100%; высота: 40 пикселей; фон: темно-синий; радиус границы: 50vh 50vh 50vh 50vh; плыть налево; переполнение: скрыто; } #прогресс { высота: 100%; фон: белый; z-индекс: 333; /* радиус границы: 5 пикселей; */ } .маркер { правая граница: 2 пикселя, сплошной белый; выравнивание текста: по правому краю; отступ: 2 пикселя; плыть налево; маржа: 0; белый цвет; } .labelRow { дисплей: гибкий; гибкое направление: строка; } .этикетка { выравнивание текста: по центру; отступ: 2 пикселя; маржа: 0; цвет: RGB(255, 255, 255); режим смешивания: разница; @media только экран и (максимальная ширина: 640 пикселей) { ширина: 50%; выравнивание текста: по центру; } } .текст { дисплей: блок; начертание шрифта: жирный; } #указатель { нижняя граница: 10 пикселей, сплошной белый цвет; левая граница: 6 пикселей сплошной rgba(0, 0, 0, 0); правая граница: 6 пикселей сплошной rgba(0, 0, 0, 0); содержание: ""; отображение: встроенный блок; высота: 0; вертикальное выравнивание: сверху; ширина: 0; преобразование: поворот (180 градусов); } 36 Нет Низкий Средний Высокая 25 50 75 100
