html - 倾斜部分Div，但不倾斜其内容。

我试图倾斜div，但不倾斜其内容，无论它是图像还是文本都应该是垂直的。

我经历了很多与我的堆栈错误有关的问题，例如
Create a slanted edge to a div，
How to skew element but keep text normal (unskewed)

在我看来，没有任何帮助。

我将图像放在左侧，文本在右侧都应该歪斜。但是当我像翻转图像一样将它们翻转到右边时（反之亦然），它应该证明自己是对的。

这是鼓舞人心的形象。



这是我为之工作的Fiddle。

<div class="container">
  <div class="partial-section">
    <div class="section-inner">
      <div id="parallelogram">
        <div class="image"></div>
      </div>
    </div>
  </div>
  <div class="partial-section">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
  border: 2px solid lightgrey;
  padding: 20px;
}

.partial-section h1 {
  font-size: 40px;
}

.partial-section p {
  font-size: 20px;
}

.section-inner {
  height: inherit;
}

#parallelogram {
  width: 100%;
  height: inherit;
  transform: skew(-40deg);
  position: relative;
  top: 0;
  overflow: hidden;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  height: inherit;
  width: 100%;
  transform: skew(40deg);
}

如果有人可以帮我解决这个问题，那将是非常荣幸。

提前致谢。

最佳答案

我看到这个问题（关于倾斜的边缘）和思路（使用偏斜）经常出现。偏斜非常酷，对于某些效果很有用，但是IMO并不属于这种情况。

我建议添加:after伪元素并创建CSS三角形以创建所需的效果。这将消除消除内容偏斜的需要。

为了使图像和内容元素保持相等的宽度，我使用了calc(50% +/- Xpx)的宽度，但这只是挑剔的东西。如果您不介意一侧的大小更大或更小，则可以将两者的宽度都设置为固定的50%。

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: calc(50% - 25px);
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
}

.partial-section h1 {
  font-size: 30px;
}

.partial-section p {
  font-size: 20px;
}

.partial--padded {
  padding: 20px;
}

.section-inner {
  height: inherit;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  top: 0;
  background-repeat: no-repeat;
  height: inherit;
  width: 100%;
}

.slanted {
  position: relative;
  width: calc(50% + 25px);
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
}

.slanted:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: 0;
  width: 0;
	border-bottom: 450px solid red;
	border-left: 50px solid transparent;
}

<div class="container">
  <div class="slanted">
      <div class="image"></div>
  </div>
  <div class="partial-section partial--padded">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>

如果您真的想使用skew来获得一些经验，我们仍然可以使用:after伪元素路线，创建一个红色矩形，并使其倾斜以形成倾斜的边缘。这再次消除了消除内部内容偏斜的需要。

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
}

.partial-section h1 {
  font-size: 30px;
}

.partial-section p {
  font-size: 20px;
}

.partial--padded {
  padding: 20px;
}

.section-inner {
  height: inherit;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  top: 0;
  background-repeat: no-repeat;
  height: inherit;
  width: 100%;
}

.slanted {
  position: relative;
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
  overflow: hidden;
}

.slanted:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  right: -25px;
  width: 50px;
  height: 100%;
  background-color: red;
  -webkit-transform: skew(-5deg);
  -moz-transform: skew(-5deg);
  -o-transform: skew(-5deg);
  transform: skew(-5deg);
}

<div class="container">
  <div class="slanted">
      <div class="image"></div>
  </div>
  <div class="partial-section partial--padded">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>

关于html - 倾斜部分Div，但不倾斜其内容。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47195890/