Question

我有一个问题：

我有两个div，它们彼此相邻倾斜。我想把它们互相依附。在我的代码中，它们之间有一些填充。当我删除那个填充时，转换就消失了。

你可以帮帮我吗？

P.S。如您所见，我使用bootstrap作为我的网站。

以下是链接：

http://www.bootply.com/iA4MZwMyre

这是我的代码：

＆＃13;

/* 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;
    }

＆＃13;

    <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>

＆＃13;

Answer 1

让我们来这个：）

只需向.skew-right添加负左边距。它适用于-23px，但你可能需要％或其他相对单位。

使用变换偏斜

1 个答案: