clip-path 绘制五角星

最新推荐文章于 2024-04-09 14:01:48 发布

技术爱好者Joker

最新推荐文章于 2024-04-09 14:01:48 发布

阅读量388

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38874840/article/details/107581832

版权

前端专栏收录该内容

48 篇文章 1 订阅

订阅专栏

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>
   <div></div>
</body>
</html>

div {
    position: relative;
    margin: 1em auto;
    width: 18em;
    height: 18em;
    -webkit-filter: drop-shadow(2px 2px 2px #222);
    filter: drop-shadow(4px 4px 5px #777);
}
div:before {
    position: absolute;
    width: inherit;
    height: inherit;
    clip-path: polygon(9em 0em, 10.76336em 6.57295em, 
      17.55951em 6.21885em, 11.85317em 9.92705em, 
      14.29007em 16.28115em, 9em 12em, 
      3.70993em 16.28115em, 6.14683em 9.92705em, 
      0.44049em 6.21885em, 7.23664em 6.57295em);
    content: '';
}
div:nth-of-type(1):before {
    background: conic-gradient(#ff0103 0deg 36deg, #fd7776 36deg 72deg, #ff3133 72deg 108deg, #fa5050 108deg 144deg, #fe9496 144deg 180deg, #fe3030 180deg 216deg, #ff8e8e 216deg 252deg, #fd1b1c 252deg 288deg, #ff757a 288deg 324deg, #fab3af 324deg 360deg);
}
div:nth-of-type(2):before {
    background: conic-gradient(#f1dd0c, #fbed1b, #e0b322, #f9ed1f, #f6eb1f, #d5ad27, #fbe603, #d8ac27, #fae502, #d7ad27, #f1dd0c);
}

收藏：https://www.html.cn/tool/css-clip-path/

技术爱好者Joker

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
clip-path 绘制五角星

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..
复制链接

扫一扫