Twitterの丸い縁取りアバターかっこいい
Twitterではフォロワーの一覧なんかを見ると、以下のデザインでカードが作られています。
このカードのヘッダー画像とボディの部分にまたがる形でアバターが表示されてるのがクールなので自分でも試してみました。
position: absoluteを使う
position: absoluteで自分のアバター画像を親の要素であるカードの位置から指定することができます。
アバター画像をposition: absoluteでまず指定して、そこに一回り大きい白円を裏に作ってやることでアバター画像の縁取りを再現しました。
See the Pen Twitter Like Profile Card by Takahiro Ito (@takahiroyte) on CodePen.
思っていたよりすんなりできました。positionをうまく使うことで、画一的なデザインから少し発展させたデザインへ近づけそうです。