两个div被白条分开（在容器内）

Question

大家好，我需要为我的网站制作一个特殊的幻灯片，我需要从两个部分“划分div”开始，用半透明的黑色或全白色对角线分开（不是从角度到角度，只是一个有点倾斜。 我在网站上搜索了所有答案，但我找不到任何东西！我也试过了一切，但这不是我想要的。 这是一张照片作为参考

Answer 1

＆＃13;

＆＃13;

.ss {
  float:left;
  width : 50%;
  box-sizing: border-box;
  border: 1px solid red;
  height: 50px
}
section {
  position: relative
}

.separator {
  height: 50px;
  width: 30px;
  background: black;
  position: absolute;
  right: calc( 50% - 15px);
  transform: skewX(-20deg);
}

＆＃13;

<section>
  <div class="one ss"></div>
  <div class="separator"></div>
  <div class="two ss"></div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以为所需的每个div使用：之前。

您可以将此代码用于2个以上的elemet。非常适合滑块 并且不需要使用额外的HTML代码。只写yor div元素

body{
  background-color:#999;
}
.main{
  width:300px;
  height:100px;
  background-color:#999;
}
.div1{
  width:50%;
  height:100%;
  background-color: blue;
  float:left;
  position:relative;
  overflow:hidden;
}
.div1:before{
  content:"";
  dislpay:inline-block;
  width:20px;
  height:110%;
  background-color:#fff;
  position:absolute;
  transform:rotate(10deg);
  right:0px;
  transform-origin: bottom;
}
.div2{
  width:50%;
  height:100%;
  background-color: red;
  float:left;
  position:relative;
  overflow:hidden;
}
.div2:before{
  content:"";
  dislpay:inline-block;
  width:20px;
  height:110%;
  background-color:#fff;
  position:absolute;
  transform:rotate(10deg);
  left:-20px;
  top:-5px;
  transform-origin: bottom;
}

<div class="main">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

请参阅我的代码：https://codepen.io/miladfm/pen/owBOKK

Answer 3

你想要的东西

＆＃13;

＆＃13;

.container{display:block;width:100%;height:200px;background-color:#ccc;}
.left{float:left;width:45%;height:200px;background-color:#ccc;}
.diagnol{float:left;width:10%;height:200px;background-color:#000;

    -ms-transform: skew(-20deg,0deg); /* IE 9 */
    -webkit-transform: skew(-20deg,0deg); /* Safari */
    transform: skew(-20deg,0deg); /* Standard syntax */

}
.right{float:left;width:45%;height:200px;background-color:#ccc;}

＆＃13;

<div class="container">
<div class="left"></div>
<div class="diagnol"></div>
<div class="right"></div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你需要玩一些颜色。

#container {
  margin: 0 50px;
}

.one {
  position: relative;
  background: darkgreen;
  width: 100px;
  border: none;
  display: inline-block;
  height: 90px;
  padding: 0px;
  margin: 0 1px;
}

.one:nth-child(1):after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: darkgreen;
  transform-origin: bottom left;
  transform: skew(-28deg, 0deg);
}

.two:before {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: -25px;
  background: blue;
  transform: skew(-28deg, 0deg);
}

.two {
  width: 60px;
  position: relative;
  background: blue;
  color: blue;
  display: inline-block;
  height: 90px;
  margin-left: 51px;
}

<div id="container">
  <div class="one">&nbsp;</div>
  <div class="two">&nbsp;</div>
</div>