Это можно сделать с помощью svg meshgradient, полноценный пример мне делать лень, но в двух словах - рисуем треугольниками, а в меше градиента совмещаем две точки, чтобы он тоже стал треугольником. https://svgwg.org/svg-next/pservers.html#MeshGradi... но он не везде поддерживается, так что нужен полифилл https://codepen.io/FragsterAt/pen/LYKBmNR (взял из того, как Inkscape сохраняет)
<div> <!-- Высоту этого дива меняем -->
<div> <!-- Высоту этого дива вычисляем при изменении контента или ширины и используем её для всех аккордеонов рекурсивно -->
content
</div>
</div>
Используй сборщик, который автоматически соберет svg sprite из svg из папки и вставит в html. Для статических страниц подходят способы отсюда: https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Для всяких spa, собираемых vite и webpack также есть плагины.
потому left - это то, сколько останется до края при прилипании, а в примере даже предыдущая колонка шире. Кажется, в данном случае лучше всего использовать offsetLeft для этого значения.
Сделать один SVG нулевой высоты, в него добавить symbol и его уже использовать в двух других svg
правда придется использовать для fill currentColor или var()