css3clip-path绘制正八边形

做微信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的关系有很多文章,本菜就不在这里发表拙见了,贴出绘制的正八边形代码,以便日后万一还用得到???


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>playtitle>
    <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>

效果如下:
这里写图片描述

你可能感兴趣的:(css3)