Поворот SVG путь с помощью CSS

Question

У меня есть этот SVG:

* { 
 
    background: #e1e1e1; 
 
}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> 
 
</svg>

Как повернуть его на 180 градусов ?!

DEMO

Answer 1

Просто используйте селектор типа элемента и добавить transform: rotate(180deg) свойство к ней, как в приведенном ниже фрагменте кода.

* { 
 
    background: #e1e1e1; 
 
} 
 
svg { 
 
    transform: rotate(180deg); 
 
}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> 
 
</svg>

---

Или, если вы хотите, чтобы повернуть только path, а не сам svg, затем включают transform-origin как в приведенном ниже фрагменте кода:

* { 
 
    background: #e1e1e1; 
 
} 
 
path { 
 
    transform: rotate(180deg); 
 
    transform-origin: 50% 50%; 
 
}

<svg class="decor" height="100%" preserveaspectratio="none" version="1.1" viewbox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M0 0 L100 100 L0 100" stroke-width="0"></path> 
 
</svg>