如何将箭头重叠到下面的div上？(How to overlap an arrow onto the div below?)

如何将箭头重叠到下面的div上？(How to overlap an arrow onto the div below?)

我试图让箭头重叠到它下方的div上（灰色箭头重叠在http://tinyletter.com上的红色上的方式）。

这是我目前使用的代码：

#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; }

I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).

Here is the code I am currently using:

#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 ）伪元素，那么只需使用border 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; }

JS小提琴演示 。

If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:

#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; }

JS Fiddle demo.