css3clip-path绘制正八边形

最新推荐文章于 2024-03-19 12:55:34 发布

Elephant_H

最新推荐文章于 2024-03-19 12:55:34 发布

阅读量3.8k

点赞数 2

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/elephant_h/article/details/77248894

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做微信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>

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

Elephant_H

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3clip-path绘制正八边形

做微信H5项目，不可避免的要碰到使用用户头像的情况，而设计师为(cong)了(bu)追(kao)求(lv)美(qian)观(duan)也总是会出一些五花八门的头像框设计稿。虽然我觉得圆形就挺好看的。。。此次项目中有一个排行榜页面，会呈现用户名称、头像、积分等一些条目，而本次的头像框，是正八边形的- -。由于本菜此前并未研究过svg，canvas等绘制矢量图形的东西，当拿到设计稿之初，脑海里浮
复制链接

扫一扫