Css 如何将箭头重叠到下面的div上?
我试图使一个箭头重叠在它下面的div上(就像灰色箭头重叠在红色上一样) 以下是我当前使用的代码:Css 如何将箭头重叠到下面的div上?,css,Css,我试图使一个箭头重叠在它下面的div上(就像灰色箭头重叠在红色上一样) 以下是我当前使用的代码: #box_1 { height: 550px; width: 100%; font-size: 4.5em; font-weight: 600; float: center; text-align: center; background-color: #ededed; padding: 55px 0 0 0; } .arrow-down { width: 0; height: 0; border-
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
如果您能够依赖于使用
::after
(或::before
)伪元素,那么只需使用边框
s:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
.请使用您已有的代码设置一个。