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

There is indeed a problem with your understanding. background: linear-gradient(45deg, orange 50%, pink 50%); The meaning of 45deg here is: starting from 0° vertically and rotating 45° clockwise. So the picture you think is correct is actually rotated 225°.
(It’s ok if you understand where 0° is and the default value is 180°)