斜め横のdivカラーCSSのjs

Question

私はこの

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
</div> 

CSSのような2 divを持っている：

.container { 
    width:100%; 
} 


.one , .two { 
    width:50%; 
    display:inline-block; 
} 

私はこの2つのdivにこの

ようになり、対角側の色を与えたいです

私はrotateを試しましたが、 eスポット。
誰でも私を助けてくれますか？

Answer 1

あなたは、コンテナ内のクリップパスと2つのdiv要素を使用することができ、

https://codepen.io/anon/pen/OOXPmv

HTML

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div> 

CSS

body, html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    background: #ccc; 
} 

#wrapper { 
    width: 100%; 
    height: 100%; 
    background: #111; 
} 

#left { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 101%; /* If you make it 100%, you get a bit of black showing along the diagonal */ 
    height: 100%; 
    background: #99b4d3; 
    -webkit-clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%); 
    clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%); 
} 

#right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    background: #d9b596; 
    -webkit-clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%); 
    clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%); 
} 

Answer 2

svgパスのCSSバックグラウンドプロパティを使用してみてください。以下の例を参照してください。親の単一勾配がビジュアルを行います

.container { 
 
    background: red; 
 
    height: 117px; 
 
} 
 

 
.one { 
 
    float: left; 
 
    width: 50%; 
 
    height: 117px; 
 
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' fill='blue' preserveAspectRatio='none'><path d='M0 0 L0 100 L50 100 L100 0 Z' /></svg>") no-repeat; 
 
} 
 
.two { 
 
    float: left; 
 
    width: 50%; 
 
    height: 117px; 
 
}

<div class="container"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
</div>

Answer 3

：

html { 
 
    min-height:100%; 
 
    background:linear-gradient(140deg, rgb(153, 180, 211)50%, rgb(217, 181, 150) 50%) 
 
}

example on HTML background sized at 100% viewport's height at the minimum.