做微信H5项目,不可避免的要碰到使用用户头像的情况,而设计师为(cong)了(bu)追(kao)求(lv)美(qian)观(duan)也总是会出一些五花八门的头像框设计稿。虽然我觉得圆形就挺好看的。。。
此次项目中有一个排行榜页面,会呈现用户名称、头像、积分等一些条目,而本次的头像框,是正八边形的- -。
由于本菜此前并未研究过svg,canvas等绘制矢量图形的东西,当拿到设计稿之初,脑海里浮现的都是怎样另辟蹊径实现这个效果,比如:
将用户头像设为background-image,border-radius 50%,头像框单独切出来盖在bg-img上,然而这种情况只适用于头像框的形状是圆形或正n边形(n>=8),同时加上一些box-shadow配合背景颜色使整体效果看起来不算太奇怪。样子大概是这个样子的(此处并非正八边形):
事后,本菜本(xian)着(zhe)求(wu)知(liao)的心态,寻找都有哪些绘制正多边形或不规则矢量图像的方法,发现了这个以前没有注意过的css3属性:clip-path
网上关于clip-path的详解以及svg、canvas与clip-path的关系有很多文章,本菜就不在这里发表拙见了,贴出绘制的正八边形代码,以便日后万一还用得到???
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>play</title>
<style>
.path {
background: black;
width: 500px;
height: 500px;
-webkit-clip-path: polygon(0px 250px, 73.21px 426.73px, 250px 500px, 426.73px 426.73px, 500px 250px, 426.73px 73.21px, 250px 0px, 73.21px 73.21px);
}
</style>
</head>
<body>
<div class="path"></div>
</body>
</html>
效果如下: