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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

倾斜部分Div而不是其内容。

1 个答案: