css3通过渐变渲染生成条纹效果旋转问题

Question

定义一个p通过渐变渲染生成一种条纹效果

.test {
    margin: 5em;
    width: 10em;
    height: 10em;
    background: linear-gradient(orange 50%, pink 50%);
}

然后旋转45度出现的效果是下图那样

 background: linear-gradient(45deg, orange 50%, pink 50%);

我想请问 本来的45度是顺时针旋转的 出现的效果不应该是下面这样么

为什么会这样 是我所理解的旋转有错误么

Answer 1

你的理解確實有問題。 background: linear-gradient(45deg, orange 50%, pink 50%); 這裡45deg的意思：以垂直向上為0°起點，順時針旋轉45°。 所以你認為正確的那個圖，其實是旋轉了225°得來的。
（理解好0°在哪裡、預設值是180°就ok了）