带有CSS

Question

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

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

任何可以帮我解决这个问题吗？

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>

Answer 2

1-您可以这样做（调整您的需求）：

<强> CSS

div {
  display: inline-block;
  background: #FCFCFE;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.bg1 {
  position: absolute;
  top: 50px;
  display: inline-block;
  transform: rotate(45deg);
  width: 300px;
  height: 300px;
  left: -160px;
  background: #F8F7FA;
  z-index: 1;
}

.bg2 {
  position: absolute;
  top: 50px;
  display: inline-block;
  transform: rotate(-45deg);
  width: 300px;
  height: 300px;
  right: -160px;
  background: #F2F3F6;
  z-index: 1;
}

<强> HTML

<div>
  <div class="bg2"></div>
  <div class="bg1"></div>
</div>

<强> DEMO HERE

2-或者您可以使用伪元素（调整您的需求）：

<强> CSS

div {
  display: inline-block;
  background: #FCFCFE;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

div:after {
  position: absolute;
  content:"";
  top: 50px;
  display: inline-block;
  transform: rotate(45deg);
  width: 300px;
  height: 300px;
  left: -160px;
  background: #F8F7FA;
  z-index: 1;
}

div:before{
  position: absolute;
  content:"";
  top: 50px;
  display: inline-block;
  transform: rotate(-45deg);
  width: 300px;
  height: 300px;
  right: -160px;
  background: #F2F3F6;
  z-index: 1;
}

<强> HTML

<div></div>

<强> DEMO HERE