Image Chips
<style>
* { box-sizing: border-box; }
.imgchip {
position: relative;
padding:0 20px;
font-size: 16px;
line-height: 50px;
border-radius: 25px;
background-color: #f1f1f1;
min-width: 120px;
display:inline-block;
}
.imgbox {
position: absolute;
top:0px;
height: 50px;
width: 50px;
overflow:hidden;
border-radius: 50%;
box-shadow: 0 2px 2px rgba(0, 0,0, 0.4);
}
.imgbox img {
max-width:100%
}
</style>
<div class="imgchip">Rahul
<div class="imgbox">
<img src="images/aaa2.jpg" alt="pic">
</div>
</div>Rahul
.imgchip {
padding-left:55px;
}
.imgbox{ left:0; }Rahul
.imgchip {
padding-right:55px;
}
.imgbox{ right:0; }Rahul
.imgchip {
padding-left:55px;
}
.imgbox{ top:-25px;left:0; }Rahul
.imgchip {
padding-right:55px;
}
.imgbox{ top:-25px;right:0;}Rahul
.imgchip {
padding-left:55px;
border-radius:5px
}
.imgbox{
left:0;
border-radius:5px;
box-shadow: 1px 0 2px rgba(0,0,0,0.4);
}Rahul
.imgchip {
padding-right:55px;
border-radius:5px
}
.imgbox{
right:0;
border-radius:5px;
box-shadow: -1px 0 2px rgba(0,0,0,0.4);
}Rahul
.imgchip {
padding-left:55px;
border-radius:5px
}
.imgbox{
left:0;
border-radius:5px;
box-shadow: 1px 0 2px rgba(0,0,0,0.4);
border: 2px solid #00d0d4;
}Rahul
.imgchip {
padding-right:55px;
border-radius:5px
}
.imgbox{
right:0;
border-radius:5px;
box-shadow: -1px 0 2px rgba(0,0,0,0.4);
border: 2px solid #00d0d4;
}
So,