好看的头像排序样式

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

body{
  background:#000;
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh;
  flex-direction: row-reverse;
}
div{
  width:150px;
   height:150px;
  background:#fff;
  border-radius: 50%;
  color:#ff0;
  text-align: center;
   line-height: 150px;
   font-size: 6rem;
   margin-left: -25px;
}
div:nth-of-type(1){
      background: rgb(2, 43, 43);
    }
div:nth-of-type(2){
      background: rgb(22, 143, 43);
    }
div:nth-of-type(3){
      background: rgb(223, 43, 143);
    }
div:nth-of-type(4){
      background: rgb(223, 143, 43);
    }

预览地址

https://codepen.io/weitangshi/pen/abprZxy