使用变换倾斜将 2 个 div 彼此相邻放置答案

【问题标题】：Place 2 divs next to each other with transform skew使用变换倾斜将 2 个 div 彼此相邻放置
【发布时间】：2015-12-09 15:54:11
【问题描述】：

我有一个问题：

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

你能帮帮我吗？

附：如您所见，我的网站使用引导程序。

以下是链接：

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>

【问题讨论】：

标签： html css transform skew

【解决方案1】：

让我们消灭这个:)

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

【讨论】：