对角边div颜色css js

Question

我有2 div喜欢这个

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

CSS：

.container {
    width:100%;
}


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

我想给这2个div一个对角线颜色就像这样

我试过了rotate，但它给了我一些白点 有人可以帮我吗？

Answer 1

父级上的单个渐变将执行视觉：

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.

Answer 2

尝试使用svg path css后台属性。见下面的例子。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在容器中使用剪辑路径和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%);
}