css - 两个带 CSS 的对 Angular 线 div 滑动条

Question

我正在尝试创建一个有两个对 Angular 线分割的背景，一个在另一个上面。

我尝试在背景上使用两个线性渐变，但没有用。

谁能帮我用 CSS 解决这个问题？

Answer 1

这可以使用 linear-gradient 背景图像来完成，但它需要渐变，而不仅仅是一个。

.diagonal-background {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom left, transparent 50%, #EEE 50.5%), 
              linear-gradient(to bottom right, transparent 50%, #CCC 50.5%);
  /* just for demo */
  line-height: 200px;
  text-align: center;
}

<div class='diagonal-background'>
  Some content</div>