用对角线分割div

Question

您如何通过对角线将 div 分成 2 部分（均包含水平文本）？

例如，请参阅其中 1 具有矩形背景图像，而 2 具有带背景颜色的文本：

Answer 1

您可以使用像这样旋转的伪元素来做到这一点：

body {
  background-color: #00bcd4;
}
.main {
  margin: 50px;
  overflow: hidden;
  position: relative;
  width: 350px;
}
.image {
  background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat;
  background-size: cover;
  height: 200px;
}
.text {
  background-color: white;
  padding: 30px;
  position: relative;
}
.text > div {
  position: relative;
  z-index: 1;
}
.text:before {
  content: "";
  background-color: white;
  position: absolute;
  height: 100%;
  width: 120%;
  top: -20px;
  left: -10%;
  transform: rotate(5deg);
  z-index: 0;
}

<div class="main">
  <div class="image"></div>
  <div class="text">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae gravida purus. Ut quis elit magna. Fusce et mattis sapien. Sed venenatis magna ut ligula facilisis, eget vulputate neque aliquet. Nulla lacinia condimentum leo non aliquet. Integer
      et enim dapibus, tempor ipsum non, fringilla enim. Cras semper fermentum dolor, at pharetra dolor ornare sit amet. Morbi eu dictum orci, tincidunt pretium nisi. Sed finibus vulputate eleifend. Nulla ac leo facilisis, fermentum tellus in, feugiat
      risus. Curabitur in sem luctus, pellentesque justo nec, aliquet velit. Nam euismod est sit amet ultrices consequat.
    </div>
  </div>
</div>