如何使用CSS来扭曲div布局，并允许图像填充偏斜区域

Question

希望你能帮助我，因为我整天都在努力解决这个问题。

我们的设计师提出了一种设计，使页面上的面板倾斜，一面是文字，另一面是图像。

然而，他希望右边的图像填充看起来像是在左下方的区域，以便顶部的左侧面板看起来与图像重叠。

您的一个例子：

HTML在此阶段非常基础：

<div class="rr rr-left">
    <div>
        <h2>ABOUT</h2>
        <p>Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum </p>
    </div>
</div>
<div class="rr rr-right">
</div>

以下是我在另一个例子中使用的CSS：

body {
  background-color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: #fff;
}


h2 {
  text-transform: uppercase;
}

p {
  width: 80%;
  font-size: 14px;
}

.rr > div {
  text-align: left;
}

.rr {
  position: relative;
  height: 400px;
  background: #004B5F;
}
.rr.rr-left {
  z-index: 1;
  float: left;
  width: 54%;
}
.rr.rr-right {
  z-index: 2;
  float: right;
  width: 45.5%;
  background-image: url('../img/animage.png');
  background-repeat:no-repeat;
  background-color: #004B5F;
}

.rr:after,
.rr:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-left:after {
  right: 0px;
  border-left: 100px solid #004B5F;
  border-bottom: 400px solid #ffffff;
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #004B5F;
  border-top: 400px solid transparent;
}

.rr-left > div {
  margin-right: 100px;
  margin-left: 50px;
}

.rr-right > div {
  margin-right: 50px;
  margin-left: 25px;
}

Answer 1

试试这个解决方案

<div class="rr rr-left">
    <div>
        <h2>ABOUT</h2>
        <p>Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum </p>
    </div>
</div>
<div class="rr rr-right">
</div>

body {
  background-color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: #fff;
}


h2 {
  text-transform: uppercase;
}

p {
  width: 80%;
  font-size: 14px;
}

.rr > div {
  text-align: left;
}

.rr {
  position: relative;
  height: 400px;
  background: #004B5F;
}
.rr.rr-left {
  z-index: 1;
  float: left;
  width: 44%;
}
.rr.rr-right {
  z-index: 2;
  float: right;
  width: 56%;
  background-image: url('http://placehold.it/550x550');
  background-repeat:no-repeat;
  background-color: #004B5F;
  overflow: hidden;
}

.rr:after,
.rr:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-right:after {
  height: 120%;
  width: 100px;
  background: #004B5F;
  transform: rotate(10deg);
  left: -68px;
  top: -20px;
  }

.rr-left > div {
  margin-right: 100px;
  margin-left: 50px;
}

.rr-right > div {
  margin-right: 50px;
  margin-left: 25px;
}

现场演示 - https://jsfiddle.net/grinmax_/mv1d9a9a/2/

Answer 2

for wrapper div image transform: skewX(-20deg) for img inside wrapper transform: skewX(20deg)

Answer 3

像这样添加HTML：

 <div class="rr-container">
        <div class="rr rr-left">
            <div class="rr-content">
                <h2>ABOUT</h2>
                <p>Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum Lorum ipsum </p>
            </div>
        </div>
        <div class="rr rr-right">
        </div>

添加如下样式：

    body {
  background-color: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 200;
  color: #fff;
      padding: 0;
    margin: 0;
}


h2 {
  text-transform: uppercase;
}

p {
  width: 80%;
  font-size: 14px;
}
.rr-container{    background: #607D8B;
    width: 100%;
    float: left;}
.rr-left {
    position: absolute;
    display: block;
    width: 35%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;    
    background: #607D8B;    
    border-right: 20px solid #607D8B;    
    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}
.rr-right {
    width: 65%;
    height: 100%;
    padding: 0;
    font-size: 20px;
    position: relative;
    float: right;
    color: #2E8DEF;
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
}
.rr-content{
    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(30deg, 0deg);
}