Andrew

Привет. Такой скролл легко сделать с помощью overflow-x: scroll и overflow-y: scroll
https://developer.mozilla.org/en-US/docs/Web/CSS/o...
https://developer.mozilla.org/en-US/docs/Web/CSS/o...

Для мобилок идеально подходит - пример Википедия таблицы так делает.
Но если разбирать десктопную версию, то в разных браузерах будет по разному смотреться. И тогда лучше использовать библиотеку. Тут уже на выбор то что вам нравится.

Привет! То что вы ищете называется аккордеон. Погуглите в интернете. И обрезку текста.

Вот тут есть простой пример - https://www.w3schools.com/howto/tryit.asp?filename...
Пример не самый лучший можно еще красивее сделать. Дальше думаю вы справитесь!

Привет! Тут есть несколько вариантов как минимум!

Самый простой это объединить график и точку в одну png. Если забить на оптимизацию.
Второй вариант эту точку сделать как обычный span без псевдоэлементов. И cпомощью flexbox или блочной верстке (как вам нравится) сделать их по вертикали.

Но скорей всего не в этом проблема. Как вы сделали блоки тоже не понятно. У вас явно где-то выше есть проблема, так как нарушается высота. Посмотрите выходит ли ваша точка или какой-то элемент за границу блока. Это вам даст подсказку.

Привет! Смотря в каких ситуациях. Если картинка svg вставлена через background и проект который ты делаешь не нуждается в поддержке браузера IE, то тогда ты можешь использовать его. Если IE нужен, то твой вариант не будет работать.

Как вариант можно сделать компонент, который будет принимать любую svg и задавать ей любой цвет. Но этот способ будет работать только со вставкой svg в верстку.

Либо без компонента сразу в самой картинки изменить ей цвет. Для этого нужно отредактировать файл svg.

Посмотреть поддержку браузеров можно тут - https://caniuse.com/?search=filter

Добавь свойство к классу shape
Что такое box-sizing - https://developer.mozilla.org/ru/docs/Web/CSS/box-...

.shape {
  box-sizing: border-box;
}