这是对他的问题的跟进:如何在div底部居中三角形并实现响应式全宽
我又卡在了涉及带有底部三角形边框的div的CSS项目上:
我想要一排级联的div看起来像这样(为演示目的下面的三角形颜色为红色):
我的代码现在看起来像这样:
我想要一排级联的div看起来像这样(为演示目的下面的三角形颜色为红色):
我的代码现在看起来像这样:
html, body {
padding: 0; margin: 0;
color: white;
}
.top {
background-color: #282C34;
height: 500px;
width: 100%;
position: relative;
}
.bottom {
background-color: #3B3E48;
height: 500px;
width: 100%;
}
.triangle {
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
width: 0;
height: 0;
bottom: -40px;
content: "";
display: block;
position: absolute;
overflow: hidden;
left:0;right:0;
margin:auto;
}
.upperTriangle {
border-top: 40px solid #282C34;
}
.lowerTriangle {
border-top: 40px solid red;
}
<div class="top">
<div class="triangle upperTriangle"></div>
</div>
<div class="bottom">
<div class="triangle lowerTriangle"></div>
</div>
<div class="top">
<div class="triangle"></div>
</div>
JSFiddle代码链接:http://jsfiddle.net/rndwz681/
我的问题:
- 我无法正确地在z轴上对齐三角形。
- 我无法正确地与除第一个之外的div对齐三角形。
非常感谢您提前的帮助。