旋转svg填充路径框

Question

我使用svg设计框边框，如下所示：

HTML：

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

CSS：

.decor {
  fill: #F00;
  stroke: #e74c3c;
}

结果：

现在我需要轮换到这个：

如何生成这个？！

DEMO FIDDLE

Answer 1

这样做：

.decor {
  fill: #F00;
  stroke: #e74c3c;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

这会将其旋转为您想要的方式。

小提琴：http://jsfiddle.net/jkvp1x8m/

Answer 2

添加变换=＆＃34;旋转（180,50,50）＆＃34;到路径

＆＃13;

＆＃13;

.decor {
  fill: #F00;
  stroke: #e74c3c;
}

＆＃13;

<svg class="decor" height="100%" viewBox="0 0 100 100" width="100%" preserveAspectRatio="none" >
    <path transform="rotate(180, 50, 50)" d="M0 0 L100 100 L0 100"></path>
</svg>

＆＃13;

＆＃13;

＆＃13;