用clip-path 制造五角星

最新推荐文章于 2024-11-25 21:09:06 发布
最新推荐文章于 2024-11-25 21:09:06 发布
阅读量577 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44551950/article/details/86569019
版权
本文由蒋鹏杰分享，教程介绍了如何利用CSS3的clip-path属性和polygon函数，结合二维坐标，将一个矩形元素动画变形为五角星。通过设置八个点的坐标，实现了五角星的形状效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用clip-path 制造五角星

作者：蒋鹏杰
首先我们要制作一个盒子，给它一些样式。
如图
在这里插入图片描述
在这里插入图片描述

给了样式以后，就是要通过css3的动画效果把它从一个长方形变成一个五角星。
在这里插入图片描述
在这里插入图片描述

clip-path的前身是SVG, 所以，我们的坐标都是二维的。
polygon的作用就是根据二维点坐标，依次连线，最后所形成的区域就是我们的遮罩区域了。
制造五角星需要八个点相连，所以给了八个坐标，polygon是从左上角开始连接的，可用%和px做单

最低0.47元/天 解锁文章
埋年
关注
你可能还不知道的CSS好用属性：clip-path
sybh的博客
11-08 1984
你是不是还在用这种方式，利用 border 的 color 属性来实现三角形。今天给大家介绍一个 css 中的一个不是很常用的属性clip-path来实现一个三角形。
css3的clip-path方法剪裁实现（三角形，多边形，圆，椭圆）
热门推荐
卡卡罗特的博客
06-06 3万+
本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。<div class="demo" style="width: 300px; height: 300px; margin: auto; background: red;...
css clip-path 画五角星
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
06-02 1553
简介 使用裁剪方式创建元素的可显示区域，实现区域裁剪。 浏览器兼容性 常用的三种方法 1. clip-path: circle(50px at 50px 50px) 以 50px 50px 的坐标为圆心裁剪一个半径 50px 的圆； 2. clip-path: ellipse(30px 40px at 50px 50px) 以 50px 50px 的坐标为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆； 3. clip-path: polygon(50% 0, 100% 50%, 50% 10
clip-path 绘制五角星
霍霍的博客
07-25 487
html 和css代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div></div> <d..
clip-path结合background绘制五角星
qq_42372534的博客
10-17 200
css五角星
不一样的css(三)
快来和我一起学前端吧~
11-25 1341
本节内容主要讲解纯css画五角星内容
css特效：clip-path
src_chao1的博客
04-07 1418
直到上一个特效发布后我才注意到这个功能强大的一个clip-path属性，但是在这里我就不多介绍了，感兴趣可以自行搜索其他博主关于clip-path的文章。这次更新内容主要在于耳朵效果和全新的波纹效果，这些新的效果全是使用clip-path属性制作的最新版本资源视频clip新增的类选择器pulseClip：所有使用clip-path制作小耳朵的新样式使用的类，不使用其他选择器默认直边心形clipStar：五角星clipSixStar：六角星clipDownArrow：下箭头。
clip-path
最新发布
03-11
利用 `polygon()` 函数绘制五角星样式 ```html <div class="star"></div> .star{ width: 10em; height: 10em; background-color:red; clip-path:polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91...
clip-path\
02-20
绘制五角星图案， 参数依次代表各个顶点相对于容器左上角的位置百分比坐标 */ clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% ...
clip-path制作新手指引
02-26
### 使用 `clip-path` 属性进行图形裁剪的新手教程 #### 一、理解 `clip-path` `clip-path` 是一种强大的 CSS 属性，用于定义一个元素的可见区域。任何超出这个区域的内容都将被裁剪掉不可见[^3]。 #### 二、基本...
【CSS3】clip-path属性深入理解与使用
細水、長流√的专栏
03-01 1612
定义：clip-path: inset(, ,,, ），括号内的值类似于margin、padding值的写法，可以写一个值，也可以写多个值。3.　ellipse；
css3clip-path绘制正八边形
Elephant_H的博客
08-16 4113
做微信H5项目，不可避免的要碰到使用用户头像的情况，而设计师为(cong)了(bu)追(kao)求(lv)美(qian)观(duan)也总是会出一些五花八门的头像框设计稿。虽然我觉得圆形就挺好看的。。。 此次项目中有一个排行榜页面，会呈现用户名称、头像、积分等一些条目，而本次的头像框，是正八边形的- -。 由于本菜此前并未研究过svg，canvas等绘制矢量图形的东西，当拿到设计稿之初，脑海里浮
CSS中的路径裁剪样式clip-path
weixin_33805992的博客
09-12 362
前面的话 　　CSS借鉴了SVG裁剪的概念，设置了clip-path样式，本文将详细介绍路径裁剪clip-path   概述 　　clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法 　　[注意]IE浏览器不支持，且低版本webkit内核浏览器需要添加-webkit-前缀 【clip...
clip-path介绍
曹定栓的博客
08-21 3万+
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。
CSS3 clip-path polygon图形构建与动画变换
huang100qi的专栏
09-12 1179
http://www.zhangxinxu.com/wordpress/2015/03/css3-clip-path-polygon-shape-transition-animation/
巧妙运用clip-path，实现CSS形状变换
qiancheng9998的博客
04-28 1002
CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的方法，连接坐标绘制掩码区域，就可以做出许多不同的形状，让底色或底图显现，随着浏览器对于CSS3的支持度大幅提升，自然而然的就可以用它来做些与众不同的变化。 运用clip-path超强的网站 最先看到这个属性的应用，是从这个网站看到的：species-in-pieces.com...
聊聊clip-path
weixin_34342992的博客
09-10 342
博客地址:Damonare的个人博客 前言 原文地址:聊聊clip-path 图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢，必须深入探究！ 正文 Flilte...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值