Javascript 对角边div颜色css js

我有两个像这样的

div

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

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

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

我尝试了

旋转

，但它给了我一些白点。

---

有人能帮我吗？

尝试使用svg路径css背景属性。见下面的例子

.container{
背景：红色；
高度：117px；
}
.一{
浮动：左；
宽度：50%；
高度：117px；
背景：url（“数据：image/svg+xml；utf8”），不重复；
}
.二{
浮动：左；
宽度：50%；
高度：117px；
}

---

尝试使用svg路径css背景属性。见下面的例子

.container{
背景：红色；
高度：117px；
}
.一{
浮动：左；
宽度：50%；
高度：117px；
背景：url（“数据：image/svg+xml；utf8”），不重复；
}
.二{
浮动：左；
宽度：50%；
高度：117px；
}

---

父对象上的单个渐变将实现视觉效果：

html{
最小高度：100%；
背景：线性梯度（140度，rgb（153180211）50%，rgb（217181150）50%）
}

---

HTML背景上的示例大小至少为100%视口高度。父对象上的单个渐变将实现视觉效果：

html{
最小高度：100%；
背景：线性梯度（140度，rgb（153180211）50%，rgb（217181150）50%）
}

---

HTML背景上的示例大小至少为100%视口高度。您可以在容器中使用剪辑路径和2个div

HTML

---

可以在容器中使用剪辑路径和2 div

HTML

---

只需将一个div旋转到另一个div的上方。你能提供你试过的代码吗？你只需要把一个div旋转到另一个上面。你能提供你试过的代码吗？这个代码简单易记，谢谢you@Zak-开发人员可以在上面添加内容，您可以玩歪斜和内容切片的游戏。这一个很简单，很容易记住，谢谢you@Zak-若要在其上添加内容，您可以使用歪斜和切成小块的内容

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

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%);
}