Как сделать карточки аватарок как на картинке?

175

20 декабря 2017, 23:30

.subscribers{ 
} 
.subscribers ul{ 
  list-style:none; 
  display:flex; 
 
} 
img{ 
  width:32px; 
  height:32px; 
  border-radius:50%; 
  margin-right:1rem; 
}

<div class="subscribers"> 
  <ul> 
    <li> 
      <div class="subscribers_img"> 
        <img src="http://preview.ab-themes.com/boat/wp-content/uploads/2015/01/team_member4.jpg"> 
        <div class="bite"></div> 
      </div> 
    </li> 
    <li> 
      <img src="http://mgdvq45m3ss2gaon92odwxol.wpengine.netdna-cdn.com/wp-content/uploads/2014/09/member-9.jpg"> 
    </li> 
    <li> 
      <img src="http://themes.themewaves.com/nuzi/wp-content/uploads/sites/4/2013/05/Team-Member-3.jpg"> 
    </li> 
    <li> 
      <img src="http://www.masterslider.com/features/templates/ms/staffcarousel/9.jpg"> 
    </li> 
 
  </ul> 
</div>

Как сделать карточки аватарок как на картинке?Не получается создать пустое место на правой стороне для картинок.

Answer 1

Это обычный бордер

.subscribers {} 
 
.subscribers ul { 
  list-style: none; 
  display: flex; 
} 
 
img { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  border: 5px solid white; 
  margin-left: -1rem; 
}

<div class="subscribers"> 
  <ul> 
    <li> 
      <div class="subscribers_img"> 
        <img src="http://preview.ab-themes.com/boat/wp-content/uploads/2015/01/team_member4.jpg"> 
        <div class="bite"></div> 
      </div> 
    </li> 
    <li> 
      <img src="http://mgdvq45m3ss2gaon92odwxol.wpengine.netdna-cdn.com/wp-content/uploads/2014/09/member-9.jpg"> 
    </li> 
    <li> 
      <img src="http://themes.themewaves.com/nuzi/wp-content/uploads/sites/4/2013/05/Team-Member-3.jpg"> 
    </li> 
    <li> 
      <img src="http://www.masterslider.com/features/templates/ms/staffcarousel/9.jpg"> 
    </li> 
 
  </ul> 
</div>