Rotate SVG path using CSS

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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)