Максим

https://codepen.io/topicstarter/pen/PMQYwE самый простой способ, только ширина одинаковая должна быть

https://codepen.io/topicstarter/pen/pMdaXE - самоё лёгкое что я придумал

В приведённом примере использован svg : https://codepen.io/topicstarter/pen/pMdaaj

background: сделай для .disease-item

Вот это для 10-11 Edge

@media all and (-ms-high-contrast:none) {
     *::-ms-backdrop, .header { max-width: 100%; overflow: hidden;} /* IE11 */
     *::-ms-backdrop, .header-slider { transform: translate(0, -140px); } /* IE11 */
     *::-ms-backdrop, .header-slider_navigation { transform: translate(-50%, -140px); } /* IE11 */
     }

https://codepen.io/topicstarter/pen/QegomB так само получается если использовать after/before и с наполнением текста высота li разная - смотри пример

Слухай 'Front-end програмист' что надо адаптировать ?

Сначала ставим картинку (в моём случае это иконка font-awesome ) и рядом блок (в моём случае это div) и всё это обёрнуто блоком родителем(в моём случае это .item) который просто flex и вертикальное выравнивание и всё а после этого обычная стилизация и в итоге получаем: https://codepen.io/topicstarter/pen/VobzxV

Там сами ромбы не крутят
А крутят их первых родителей
А потом крутят текст в обратную сторону и получается в итоге вот это : https://codepen.io/topicstarter/pen/dxWPPm

Для того что бы заработало внутри use надо удалить все стилизации внутри symbol

Предлогаю применять SVG вместе со своим фильтром и выглядеть это будет так: https://codepen.io/topicstarter/pen/GVNOaK

https://codepen.io/topicstarter/pen/voygZQ вот так например, если что то не ясно спрашивай

https://codepen.io/topicstarter/pen/MNbgdK - вынес все размеры в переменные и адаптировал уже переменные

https://jsfiddle.net/02mepdLj/1/ вроде бы похоже на правду