<div class="content">
<div class="header">
</div>
<div class="circle-border"></div>
<div class="circle">
<i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</div>
</div>
<div class="footer">
</div>
body {
margin: 0;
padding: 0;
}
.content {
height: 150px;
position: relative;
border-bottom: 2px solid;
}
.header {
height: 150px;
background: #0f0;
z-index: 0;
position: relative;
border-bottom: 2px solid;
z-index: 1;
}
.circle-border {
width: 60px;
height: 62px;
border-radius: 50%;
bottom: -32px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
border: 2px solid;
z-index: 0;
}
.circle {
width: 60px;
height: 60px;
background: #0f0;
border-radius: 50%;
bottom: -30px;;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
font-size: 30px;
line-height: 60px;
z-index: 2;
}
.footer {
height: 150px;
background: #f0f;
}
This Pen doesn't use any external JavaScript resources.