Две диагонали ДИВ проскальзывает с CSS

Question

Я пытаюсь создать фон с двумя диагональными расколов, с одной над другой.

Я попытался использовать два линейных градиента на фоне, но это не сработало.

Любой может помочь мне решить эту проблему с помощью CSS?

Answer 1

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

Answer 2

Это можно сделать с использованием фоновых изображений 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>