Rotate SVG path using CSS

Solution 1:

Just use the element type selector and add the transform: rotate(180deg) property to it like in the below snippet.

* {
  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>

Or, if you want to rotate only the path and not the svg itself, then include a transform-origin like in the below snippet:

* {
  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>

Solution 2:

Inline you would do it like this:

• x-axis flip : transform="scale(-1 1)"
• y-axis flip : transform="scale(1 -1)"

eg. in your example:

<svg class="decor" transform="scale(-1 1)" 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>