html - 使用变换倾斜将 2 个 div 并排放置

Question

我有一个问题:

我有两个 div，它们彼此相邻并进行了倾斜转换。我想把它们连接起来。在我的代码中，它们之间有一些填充。当我删除该填充时，转换就消失了。

你能帮帮我吗？

附言如您所见，我的网站使用 Bootstrap 。

链接如下:

http://www.bootply.com/iA4MZwMyre

这是我的代码:

/* CSS used here will be applied after bootstrap.css */

    .col-xs-6 { padding: 0; }
  
    .skewLeft {     
        overflow: hidden;
        padding: 1% 2%;
    }

    .skewLeft:before {
        content: '';
        position: absolute;
        top: 0; right: 0;
        width: 100%; height: 100%;
        background: #f7de1d;
        -webkit-transform-origin:100% 0;
        -ms-transform-origin:100% 0;
        transform-origin: 100% 0;
        -webkit-transform: skewX(-10deg);
        -ms-transform: skewX(-10deg);
        transform: skewX(-10deg);
        z-index: -1;
    }

    .skewRight { 
        overflow: hidden;
        padding: 1% 2%;
    }

    .skewRight:before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%; height: 100%;
        background: #83d0f5;
        -webkit-transform-origin:100% 0;
        -ms-transform-origin:100% 0;
        transform-origin: 100% 0;
        -webkit-transform: skewX(-10deg);
        -ms-transform: skewX(-10deg);
        transform: skewX(-10deg);
        z-index: -1;
    } 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-6 skewLeft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col-xs-6 skewRight">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

让我们死掉这个:)

只需在 .skew-right 中添加一个负的左边距。它适用于我的 -23px，但您可能需要 % 或其他相关单位。