倾斜部分 Div 但不倾斜其内容。

Question

我试图倾斜一个 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);
}

如果有人能帮我解决这个问题，我会很高兴。

提前致谢。

Answer 1

我看到这个问题（关于倾斜的边缘）和思路（使用倾斜）经常出现。偏斜非常酷，并且对某些效果很有用，但 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>