Мобильная версияЯ новичок в CSS и новый пользователь переполнения стека. Я хочу создать окно сообщения (речевой пузырь), как в [Дизайн, который мне дали] (
):Я скопировал из Интернета код, который рисует что-то похожее. Вот результат моего кода:
Это мой код:
* { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } тело { минимальная высота: 100vh; положение: относительное; фоновое изображение: URL('images/bg-mobile.png'); фоновый повтор: без повтора; размер фона: обложка; семейство шрифтов: «Raleway», без засечек; } .контейнер { позиция: абсолютная; верх: 40%; осталось: 40%; трансформировать: транслировать(-40%, -40%); дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; } .фило { дисплей: гибкий; гибкое направление: столбец; разрыв: 1,7эм; ширина: 320 пикселей; фон: hsl(228, 56%, 26%); отступы: 2em 3.6em 2.6em 2em; маржа: 0,5ем; радиус границы: 0,7em; радиус верхнего правого края: 7em; } .fylo .второй слой { дисплей: гибкий; гибкое направление: строка; разрыв: 0,9эм; } .второй слой div { ширина: 30 пикселей; высота: 30 пикселей; отступ: 1,36em; цвет фона: hsl(229, 57%, 11%); дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; радиус границы: 6 пикселей; } .flex-контейнер { ширина: 320 пикселей; фон: hsl(228, 56%, 26%); отступы: 2em 1,5em 3em; радиус границы: 0,7em; дисплей: гибкий; гибкое направление: столбец; цвет: hsl(0, 0%, 100%, .7) } .flex-контейнер p { нижняя граница: 0,1em; выравнивание текста: по центру } .inner-flex { дисплей: гибкий; маржа-верх: 0,65em; размер шрифта: 0,77рем; вес шрифта: 600; } .inner-flex span:nth-child(2) { поле слева: авто; } прогресс { -webkit-внешний вид: нет; -moz-внешний вид: нет; внешний вид: нет; ширина: 100%; маржа-верх: 1em; } /*Для браузеров WebKit, таких как Chrome, мне необходимо включить следующие псевдоэлементы. Третий здесь бесполезен*/ /*Индикатор*/ ::-webkit-прогресс-значение { фон: линейный градиент (hsl(6, 100%, 80%), hsl(335, 100%, 65%)); радиус границы: 20 пикселей; положение: относительное; переполнение: скрыто; } ::-webkit-progress-value::after { содержание: ""; позиция: абсолютная; ширина: 20 пикселей; высота: 20 пикселей; фон: желтый; радиус границы: 50%; верх: 50 пикселей; справа: 20 пикселей; трансформировать: TranslateX(50%, -50%); z-индекс: -1; } /*Бар*/ ::-webkit-прогресс-бар { фон: hsla(229, 57%, 11%, 0,5); радиус границы: 20 пикселей; высота: 17 пикселей; граница: 2 пикселя, сплошная hsla(229, 57%, 11%, 0,5); } /* для браузеров Moz, таких как Firefox, мне нужно использовать единственный существующий псевдоэлемент (один) для свойства внешнего вида и стилизовать его так же, как я стилизовал ::-webkit-progress-value, я мог бы использовать запятую для разделения селекторов но мы имеем дело с экспериментальными свойствами и имеем нестандартное поведение */ ::-moz-прогресс-бар { фон: линейный градиент (hsl(6, 100%, 80%), hsl(335, 100%, 65%)); радиус границы: 20 пикселей; } /*Конец экспериментальных объявлений*/ .left-хранилище { ширина: 175 пикселей; высота: 75 пикселей; фон: hsl(0, 0%, 100%); радиус границы: 0,6em; маржа-верх: -2,35em; } .left-хранилище { дисплей: гибкий; гибкое направление: строка; выровнять-элементы: по центру; оправдание-содержание: центр; разрыв: 12 пикселей; } .left-storage>span:nth-child(1) { вес шрифта: 700; размер шрифта: 2,5рем; непрозрачность: 0,9; } .left-storage>span:nth-child(2) { преобразование текста: верхний регистр; вес шрифта: 600; размер шрифта: 0,8рем; цвет: hsla(229, 7%, 55%, .8); } @media (минимальная ширина: 955 пикселей) { .контейнер { гибкое направление: строка; } .flex-контейнер { маржа-верх: Calc(188.333px - 125.6px); поле слева: 0,5em; ширина: 400 пикселей; отступ: 1,5em; } .left-хранилище { ширина: 120 пикселей; высота: 80 пикселей; фон: hsl(0, 0%, 100%); положение: относительное; -moz-border-radius: 10 пикселей; -webkit-border-radius: 10 пикселей; радиус границы: 10 пикселей; } .left-storage::before { содержание: ""; позиция: абсолютная; правильно: 100%; верх: 26 пикселей; ширина: 0; высота: 0; border-top: 13 пикселей сплошной прозрачный; правая граница: 26 пикселей, сплошной белый; граница-дно: 13 пикселей сплошной прозрачный; } Вы использовали 815 ГБ вашего хранилища
0 ГБ 1000 ГБ Осталось 185ГБ
Я хочу добиться того, чтобы хвост окна сообщения (т. е. .left-storage в CSS) располагался так, как он есть в дизайне. Я хочу понять, как это сделать.
Я также хочу знать, как сделать так, чтобы маленький белый кружок появлялся в конце значения прогресса (того, что загружается) с помощью CSS.
