Мобильная версияКак добавить стрелку в конец каждой строки там, где она пересекает край области просмотра/указывает на край области просмотра, т. е. сверху, справа, снизу, слева? Мне бы хотелось, чтобы наконечники стрел были около 3 бэров (~50 пикселей), а линия действовала как стержень стрелы. Я бы хотел, чтобы стрелка не была заполнена, т. е. рисовалась линиями, имеющими те же реквизиты, что и текущие линии (1 пиксель, сплошной темно-розовый цвет). Вот макет:
Вот мой текущий код:
body { маржа: 0; заполнение: 0; } .horver { ширина: 100vw; высота: 100вх; дисплей: сетка; место-содержание: центр; положение: относительное; } .horver::before { содержание: ""; позиция: абсолютная; верх: 50%; слева: 0; ширина: 100%; высота: 1 пиксель; фон: глубокий розовый; фоновое изображение: линейный градиент (вправо, прозрачность 49%, темно-розовый 49%, темно-розовый 51%, прозрачный 51%); размер фона: 100% 1 пиксель; фоновая позиция: центр; } .horver::after { содержание: ""; позиция: абсолютная; верх: 0; осталось: 50%; ширина: 1 пиксель; высота: 100%; фон: #ff1493; фоновое изображение: линейный градиент (вниз, прозрачный 49%, темно-розовый 49%, темно-розовый 51%, прозрачный 51%); размер фона: 1 пиксель 100%; фоновая позиция: центр; } ч1 { семейство шрифтов: моноширинный; цвет фона: белый; граница: 1 пиксель, сплошной темно-розовый; радиус границы: 0,25рем; цвет: темно-синий; отступ: 0,25 эм 0,5 эм; z-индекс: 100; ширина&высота
Я готов к реструктуризации CSS и HTML по мере необходимости.
Идея состоит в том, чтобы затем написать функцию, которая будет возвращать ширину и высоту области просмотра динамически/при ее изменении.
Спасибо!
