<div class="h-divider">
<div class="shadow"></div>
<div class="text"><i>something</i></div>
</div>
<div class="h-divider">
<div class="shadow"></div>
<div class="text2"><img src="https://t1.gstatic.com/images?q=tbn:ANd9GcQsmMfybMIwoE5etmOIAuvnFWdfv_8C1Bq15urJFqwhhI55FyYNP2YuUA" /></div>
</div>
<div class="h-divider">
<div class="shadow"></div>
</div>
.h-divider {
margin: auto;
margin-top: 80px;
width: 80%;
position: relative;
}
.h-divider .shadow {
overflow: hidden;
height: 20px;
}
.h-divider .shadow:after {
content: '';
display: block;
margin: -25px auto 0;
width: 100%;
height: 25px;
border-radius: 125px/12px;
box-shadow: 0 0 8px black;
}
.h-divider .text {
width: 100px;
height: 45px;
padding: 10px;
position: absolute;
bottom: 100%;
margin-bottom: -33px;
left: 50%;
margin-left: -60px;
border-radius: 100%;
box-shadow: 0 2px 4px #999;
background: white;
}
.h-divider .text i {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
right: 4px;
border-radius: 100%;
border: 1px dashed #aaa;
text-align: center;
line-height: 50px;
font-style: normal;
color: #999;
}
.h-divider .text2 {
width: 70px;
height: 70px;
position: absolute;
bottom: 100%;
margin-bottom: -35px;
left: 50%;
margin-left: -25px;
border-radius: 100%;
box-shadow: 0 2px 4px #999;
background: white;
}
.h-divider img {
position: absolute;
margin: 4px;
max-width: 60px;
border-radius: 100%;
border: 1px dashed #aaa;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.