1

その下の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;
}
4

1 に答える 1

3

::after（または）疑似要素の使用に依存できる場合、これはs::beforeを使用するだけで比較的簡単です。border

#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フィドルデモ。

于 2012-05-05T21:35:45.397 に答える