下のdivに矢印を重ねる方法は？

Question

私は矢の下にある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; 
} 

Answer 1

あなたが::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 Fiddle demo。