我需要帮助创建响应式 div,其背景图像具有倾斜或 Angular ,没有边框,以实现如下外观:
<div class="rr-left">
</div>
<div class="rr-right">
</div>
我已经尝试在这个解决方案中使用背景图片,唯一的问题是倾斜的边框是彩色的,如果我向其中添加背景图片,它看起来会一团糟。
我看过这个:http://codepen.io/jefflupinski/pen/azvsA但是歪斜的唯一问题是我需要左右两边是直的
所以我想知道是否有人找到了使两个 div 都触摸并具有响应式背景或以合并图像的方式将两者结合起来的解决方案
谢谢希望这是有道理的
最佳答案
尝试以下方法并根据需要进行调整。
#holder {
height: auto;
width: auto;
float: left;
overflow: hidden;
font-family: calibri;
background-color: white;
position: relative;
}
#holder .content {
display: inline-block;
width: 45%;
text-align: center;
position: relative;
color: white;
cursor: pointer;
background: #2c3e50;
margin-left: 0;
z-index: 2;
}
#holder .content:hover {
background-color: #425160;
}
.content:hover .line {
background: #425160!important;
}
#holder .line {
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg);
border-left: solid 1px white;
position: absolute;
right: 89%;
display: block;
width: 40px;
background: inherit;
height: 250px;
bottom: -10px;
z-index: -1;
}
p,
h3 {
padding: 0 30px 0 30px;
text-align: left;
width: 70%;
}
h3 {
font-size: 24px;
line-height: 24px;
margin-bottom: 0;
}
<div id="holder">
<div class="content">
<h3>This is a header</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
<div class="content">
<div class="line"></div>
<h3>This is a header</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Holder -->
关于html - 需要帮助创建 slated 或 angled div CSS/HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27871408/