Question

我希望并排有2个div。一个带有一些文本和坚实的背景，一个带有图像作为背景。我有歪斜部分的问题。 div偏斜，但看起来很奇怪，您可以看到网站的背景。

看看gyazo的屏幕截图：

如果可以的话，请帮助我删除图片文字和网站边框之间的小空间！

我尝试了多种不同的方法，从45度背景线性渐变到其他种类的东西。

.apartments-showCase-content {
  width: 50%;
  background: grey;
  height: 30em;
  float: left;
  box-sizing: border-box;
  left: 50%;
  transform: skew(6deg);
}

.apartments-showCase-image {
  width: 50%;
  background: #222;
  height: 30em;
  float: right;
  background: url(https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image);
  background-size: cover;
  transform: skew(6deg);
}

<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image"></div>
</section>

Answer 1

浮动，倾斜元素的宽度与原始宽度相同。我在该部分中添加了一个容器，在该部分上设置了getVisibility()，并使该容器大于该部分并居中。这意味着由歪斜创建的整个“三角形”是隐藏的。您可能需要使用数字，我只是在每一侧任意添加10％的宽度。

此外，您对内容的overflow:hidden;规则没有做任何事情，因为该元素的位置不是相对或绝对。

left:50%

.apartments-showCase-content {
  width: 50%;
  background: grey;
  height: 30em;
  float: left;
  box-sizing: border-box;
  transform: skew(6deg);
}

.apartments-showCase-image {
  width: 50%;
  background: #222;
  height: 30em;
  float: right;
  background: url(https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image);
  background-size: cover;
  transform: skew(6deg);
}

.apartments-section {
  overflow: hidden;
}

.apartments-section-container {
 width: 120%;
 position: relative;
 left: -10%;
}

Answer 2

您可以将图片背景放置在img标签中，并可以使用transform: scale(1, 1.5); css中的属性，以使其缩放以实现完美的大小调整。所以，将CSS更改为：

.apartments-section{
  background:gray;
  transform: scale(1, 1.5);
  width:100%;
  overflow:hidden;
}

.apartments-showCase-content {
  width: 50%;
  background: grey;
  height: 30em;
  float: left;
  box-sizing: border-box;
  left: 50%;
  transform:skew(9deg)
}

.apartments-showCase-image {
  width: 50%;
  background: #222;
  height: 30em;
  float: right;
  background: #ff7f7f; //you can place bg color as your image background color
  background-size: cover;
}

.apartments-showCase-image img{
  transform:skew(9deg);
  width:100%;
  height:100%
}

和html为

<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image">
    <img src="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image" alt="img"/>
  </div>
</section>

这不是很明显的答案，但这可以帮助您。谢谢...

Answer 3

您可以使用css3“ calc”，使您可以方便地计算宽度百分比以及所设置的度数（以rad为单位）：margin-side：calc（height *（10 *π/ 360）） ;

.container{
  display:flex;
  border: 1px solid #000;
}
.container .one{
  position: relative;
  margin-left: calc(-350px * 0.0872665);
  flex: 1;
  height:350px;
  transform: skew(10deg);
  background: grey;
}
.container .two{
  position: relative;
  margin-right: calc(-350px * 0.0872665);
  flex: 1;
  height:350px;
  background-size: cover;
  transform: skew(10deg);
  background-color: #222;
  background-image: url(https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image);
}

    <section class="container">
      <div class="one"></div>
      <div class="two"></div>
    </section>

Answer 4

我想您想使图像保持不倾斜，因此您只能从一侧将倾斜应用于第一个div。

这是一个有背景的想法，诀窍是在中间创建一个重叠部分，然后在该区域绘制一个渐变的三角形

.apartments-showCase-content {
  width: calc(50% + 20px);
  background: 
    linear-gradient(to bottom left,transparent 49%,grey 50%) right/41px 100% no-repeat,
    grey content-box;
  padding-right:40px; /*2 x 20px*/
  margin-right:-40px; /*-2 x 20px*/
  box-sizing:border-box;
  z-index:1;
}

.apartments-showCase-image {
  width: calc(50% + 20px);
  background: #222;
  background: url(https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image) center/cover;
}
.apartments-section {
  height:300px;
  display:flex;
}

body {
 margin:0;
}

<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image"></div>
</section>

与剪切路径相同的想法：

.apartments-showCase-content {
  width: calc(50% + 20px);
  background:grey;
  clip-path:polygon(0 0,calc(100% - 20px) 0, 100% 100%, 0 100%);
  
  margin-right:-40px; /*-2 x 20px*/
  box-sizing:border-box;
  z-index:1;
}

.apartments-showCase-image {
  width: calc(50% + 20px);
  background: #222;
  background: url(https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image) center/cover;
}
.apartments-section {
  height:300px;
  display:flex;
}

body {
 margin:0;
}

<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image"></div>
</section>

并排倾斜的div

4 个答案: