css3通過漸變渲染生成條紋效果旋轉問題

問題描述

定義一個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度是順時針旋轉的 出現的效果不應該是下面這樣么

為什么會這樣 是我所理解的旋轉有錯誤么

問題解答

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