css - 使用css按对 Angular 线分割的双色调背景

Question

我正在尝试使用 css 创建一个背景，其中一侧是纯色，另一侧是纹理:两者由对 Angular 线分开。我希望这是 2 个单独的 div，因为我计划使用 jQuery 添加一些运动，如果您单击右侧，灰色三 Angular 形会变小，如果您单击左侧，带纹理的三 Angular 形会变小(如窗帘效果)。任何建议将不胜感激。

Answer 1

我认为使用带有硬过渡的背景渐变是一个非常干净的解决方案:

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}