使用CSS的两个对角div滑动

Question

我正在尝试创建一个带有两个对角分割的背景,一个在另一个上.

我尝试在背景上使用两个线性渐变,但它不起作用.

任何可以帮助我用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>