CSS3

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

More than 1 year has passed since last update.


作りたいもの

こういうやつ

skitch.png


書いてみた

出来たものはこちら

スクリーンショット 2017-02-17 11.02.49.png

コード

https://jsfiddle.net/cfyjvgu8/4/


ざっくり説明

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


2人の場合

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

<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;
}

https://jsfiddle.net/z0cLfrxv/


3人の場合

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

<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;
}

https://jsfiddle.net/7ffvykm8/1/


追記

今回はシンプルな円なのでclip-path使わなくてもborder-rodiusでも同じように書けます。

clip-path使わない版も参考までに残しておきます。

https://jsfiddle.net/7ffvykm8/4/