圆角正六边形头像

原创 米ai冉 随笔 CSS应用 338阅读 2018-07-17 20:14:36 举报

引言

后台管理系统或博客类型的网站中,经常需要有用户头像的展示。一般使用圆角矩形或者正圆形作为头像框,但今天遇到一个需求,用圆角正六边形做头像框。
想当初学习CSS3的时候,研究过利用border-color、transform两个属性实现过正三角形、正五边形、正六边形。。。这些图形都是实现即可,但从没想过往里面添加内容。
经过一番思考,使用了伪元素和transform的方式来实现。

代码及其说明

  1. div.avatar-box包裹整个头像区域
  2. div.avatar是头像容器
  3. div.avatar及其伪元素:before,:after实现正六边形的边框
  4. div.avatar-clip实现六边形外的区域裁剪
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复