斜边div颜色CSS JS [英] Diagonal Side div color css js

问题描述

我有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个divs像这样的对角线边色

I want to give this 2 divs a diagonal side color to be like this

我尝试了旋转但这给了我一些白点。

有人可以帮我吗？

I tried rotate but it gave me some white spot.
Can any one help me please ?

推荐答案

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

You can use clip paths and 2 div within a container,

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

这篇关于斜边div颜色CSS JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！