并排倾斜的div
我想要两个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://i.picsum.photos/id/1003/800/800.jpg);
background-size: cover;
transform: skew(6deg);
}<section class="apartments-section">
<div class="apartments-showCase-content"></div>
<div class="apartments-showCase-image"></div>
</section>
回答 4
Stack Overflow用户
发布于 2019-06-29 01:38:38
浮动的倾斜元素的宽度与原始宽度相同。我在节中添加了一个容器，在节上设置了overflow:hidden;，并使容器比节大并居中。这意味着由倾斜创建的整个“三角形”是隐藏的。你可能不得不玩弄数字，我只是随意地在两边增加了10%的宽度。
此外，您对内容的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://i.picsum.photos/id/1003/800/800.jpg);
background-size: cover;
transform: skew(6deg);
}
.apartments-section {
overflow: hidden;
}
.apartments-section-container {
width: 120%;
position: relative;
left: -10%;
}<section class="apartments-section">
<div class="apartments-section-container">
<div class="apartments-showCase-content"></div>
<div class="apartments-showCase-image"></div>
</div>
</section>
Stack Overflow用户
发布于 2019-06-29 02:03:50
您可以将图像背景放在css标签中，并可以使用img中的transform: scale(1, 1.5);属性使其缩放以获得完美的大小。因此，将您的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>这不是显而易见的答案，但这将帮助您如何..谢谢..。
Stack Overflow用户
发布于 2019-06-29 02:04:48
你可以使用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>
https://stackoverflow.com/questions/56810686
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号