facebook Messengerでの複数人がいるアイコンっぽいのを書いてみた

作りたいもの

こういうやつ

書いてみた

出来たものはこちら

コード
https://jsfiddle.net/cfyjvgu8/4/

ざっくり説明

いい感じに画像を並べてclip-path使ってマスクする。

２人の場合

２人の場合は、そのまま画像を並べてマスクすると人の顔が半分に切れちゃうので、それぞれを真ん中によるようにマスクしたのを左右に並べてから丸に切り抜いた。

<div class="img-mask">
  <div class="half-mask is-l">
    <img src="https://dgndea2fsuumd.cloudfront.net/assets/profile/luckofwise/luckofwise_thumbnail-ec70c49062639cfcc3b416789101e5b696d1887fc347e66d36722b8327193483.jpg" class="img-lg">
  </div>
  <div class="half-mask is-r">
    <img src="https://dgndea2fsuumd.cloudfront.net/assets/profile/interu/interu_thumbnail-9f8bc95d65c661c21d3588a003bb6ed4aec3bccee12d024c5b5c12a418bdf85d.jpg" class="img-lg">
  </div>
</div>

.img-mask {
  width: 100px;
  height: 100px;
  position: relative;
  clip-path: circle(50px at center);
  -webkit-clip-path: circle(50px at center);
}
.half-mask {
  width: 50%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  position: absolute;
}
.half-mask img {
  position: absolute;
  left: -50%;
  width: 200%
}
.is-l {
  left: 0;
}
.is-r {
  right: 0;
}

３人の場合

３人の場合は、２人の場合の左だけ残して、半分のサイズの画像を右上と右下に配置してから丸に切り抜いた。

<div class="img-mask">
  <div class="half-mask is-l">
    <img src="https://dgndea2fsuumd.cloudfront.net/assets/profile/luckofwise/luckofwise_thumbnail-ec70c49062639cfcc3b416789101e5b696d1887fc347e66d36722b8327193483.jpg" class="img-lg">
  </div><img src="https://dgndea2fsuumd.cloudfront.net/assets/profile/interu/interu_thumbnail-9f8bc95d65c661c21d3588a003bb6ed4aec3bccee12d024c5b5c12a418bdf85d.jpg"
  class="img-sm is-tr"><img src="https://dgndea2fsuumd.cloudfront.net/assets/profile/tochi/tochi_thumbnail-d11047528417be03dacdb7f633d9e25f4e0ce2a64ed1ecb6f9b4040a88d03648.jpg" class="img-sm is-br">
</div>

.img-mask {
  width: 100px;
  height: 100px;
  position: relative;
  clip-path: circle(50px at center);
  -webkit-clip-path: circle(50px at center);
}
.half-mask {
  width: 50%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  position: absolute;
}
.half-mask img {
  position: absolute;
  left: -50%;
  width: 200%
}
.is-l {
  left: 0;
}
.img-sm {
  width: 50%;
  height: 50%;
  position: absolute;
}
.is-tr {
  top: 0;
  right: 0;
}
.is-br {
  bottom: 0;
  right: 0;
}

追記

今回はシンプルな円なのでclip-path使わなくてもborder-rodiusでも同じように書けます。
clip-path使わない版も参考までに残しておきます。
https://jsfiddle.net/7ffvykm8/4/