CSSだけでランキング上位者感漂うアバターを作る - Qiita

.avatar { background: linear-gradient(to bottom right, #fefd68, #a08001); border-radius: 50%; height: 82px; padding: 5px; width: 82px; img { background: #fff; /* 透過してる画像の対応 */ border-radius: 50%; height: 100%; width: 100%; } } 説明 border-radius: 50%; で丸を作って padding: 5px; で画像の外側に 5pxの余白を作ります 背景に linear-gradient を指定して完成です🤗 background: linear-gradient(to bottom right, #fefd68, #a08001); 左上から右下へ #fefd