如何在容器中间使用倾斜属性到顶部和底部

时间：2017-05-19 13:26:55

标签： html css css3 flexbox

我使用我的代码段中的代码将形状放在中间，如果你运行代码段，除了最后一个框之外你可以看到。但是，我不想要盒子之间的白色间距，但我正在努力做到这一点

＆＃13;
＆＃13; 
.image-container {
    position: relative;
    width: 100%;
    height: 331px;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-flow: wrap column;
    align-items: center;
    justify-content: center;
}
.image-container:before {
   content: '';
   position: absolute;
   z-index: -4;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
    left: 0;
    right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
    left: 50%;
    right: 0;
}
.image-container-split {
    position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    padding-bottom: 20px;
    display: flex;
    flex-direction: wrap column;
    align-items: center;
    justify-content: center;
}

.image-container-split:first-child {
    border-left: none;
    padding-left: 20px;
}
.image-container-split:last-child {
    border-right: none;
    padding-right: 20px;
}
.image-container-split:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20px;
    border: 10px solid #fff;
    border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
    right: -20px;
    border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
    left: -20px;
    border-right-color: transparent;
}
.image-container-split:after {
    content: '';
    position: absolute;
    z-index: -3;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    opacity: 0.5;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}
.image-container-split:first-child:after {
    border-left: none;
}
.image-container-split:last-child:after {
    border-right: none;
}
.image-container-split:nth-child(odd):after {
    background-color: red;
    right: -20px;
}
.image-container-split:nth-child(even):after {
    background-color: red;
    left: -20px;
}
.new_container{
  background: blue;
}

.blue{
  background-color: blue;
}
＆＃13; 
<section id="latest_news">
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
      <!-- content goes here -->
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex aspernatur praesentium iste ratione nesciunt consectetur animi, temporibus, commodi quibusdam, nemo assumenda provident nam vel? Necessitatibus sint sit illum atque.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
        </div>
      </div>
    </div>
  </div>
  
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
            <!-- content goes here -->
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi expedita, fugiat deleniti sit quos in accusamus laboriosam! Nulla rerum vero sunt accusamus. Suscipit nesciunt reiciendis est repudiandae sunt modi.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split blue">
        </div>
        <div class="image-container-split blue">
        </div>
      </div>
    </div>
  </div>
  <div class="new_container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque corrupti voluptatibus sapiente optio modi veritatis eveniet corporis deleniti aspernatur dolores atque doloribus alias, laborum officiis quod consectetur! Possimus magni, officiis.
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

希望你能用更好的技术帮助我实现这一目标。

提前致谢

2 个答案:

答案 0 :(得分：1)

为此，你应该使用另一种简单的技术，比如这个

<强> DEMO HERE

<强> CSS 

.first,
.second,
.third {
  position: relative;
  display: block;
  height: 100px;
  padding: 20px;
}

.first {
  background: red;
}

.first:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 0, 0, 0);
  border-top-color: red;
  border-width: 30px;
  margin-left: -30px;
  z-index: 2;
}

.second {
  background: blue;
}

.second:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(0, 0, 255, 0);
  border-top-color: blue;
  border-width: 30px;
  margin-left: -30px;
  z-index: 2;
}

.third {
  background: yellow;
}

<强> HTML 

<div class="first">
  sdfsdfsdfsdfsdf
</div>

<div class="second">
  sdfsdfsdfsdfsfs
</div>

<div class="third">
  sdfsdfsdfsdfs
</div>

答案 1 :(得分：0)

只需将margin-bottom: -20px;添加到.image-container即可让它们更加紧密

.image-container {
    position: relative;
    width: 100%;
    height: 331px;
    padding: 40px 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-flow: wrap column;
    align-items: center;
    justify-content: center;
    margin-bottom: -20px;
}
.image-container:before {
   content: '';
   position: absolute;
   z-index: -4;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
    left: 0;
    right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
    left: 50%;
    right: 0;
}
.image-container-split {
    position: absolute;
    z-index: -3;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 20px solid transparent;
    border-bottom-color: #fff;
    padding-bottom: 20px;
    display: flex;
    flex-direction: wrap column;
    align-items: center;
    justify-content: center;
}

.image-container-split:first-child {
    border-left: none;
    padding-left: 20px;
}
.image-container-split:last-child {
    border-right: none;
    padding-right: 20px;
}
.image-container-split:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20px;
    border: 10px solid #fff;
    border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
    right: -20px;
    border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
    left: -20px;
    border-right-color: transparent;
}
.image-container-split:after {
    content: '';
    position: absolute;
    z-index: -3;
    top: -20px;
    left: 0;
    right: 0;
    bottom: -20px;
    opacity: 0.5;
    border: 20px solid transparent;
    border-bottom-color: #fff;
}
.image-container-split:first-child:after {
    border-left: none;
}
.image-container-split:last-child:after {
    border-right: none;
}
.image-container-split:nth-child(odd):after {
    background-color: red;
    right: -20px;
}
.image-container-split:nth-child(even):after {
    background-color: red;
    left: -20px;
}
.new_container{
  background: blue;
}

.blue{
  background-color: blue;
}
<section id="latest_news">
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
      <!-- content goes here -->
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex aspernatur praesentium iste ratione nesciunt consectetur animi, temporibus, commodi quibusdam, nemo assumenda provident nam vel? Necessitatibus sint sit illum atque.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split">
        </div>
        <div class="image-container-split">
        </div>
      </div>
    </div>
  </div>
  
  <div class="skewing_mixin">
    <div class="image-container image-container-col-2">
      <div class="container">  
            <!-- content goes here -->
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi expedita, fugiat deleniti sit quos in accusamus laboriosam! Nulla rerum vero sunt accusamus. Suscipit nesciunt reiciendis est repudiandae sunt modi.
      </div>
      <div class="image-container-split-container">
        <div class="image-container-split blue">
        </div>
        <div class="image-container-split blue">
        </div>
      </div>
    </div>
  </div>
  <div class="new_container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque corrupti voluptatibus sapiente optio modi veritatis eveniet corporis deleniti aspernatur dolores atque doloribus alias, laborum officiis quod consectetur! Possimus magni, officiis.
  </div>
</section>

相关问题
最新问题