当前位置: 代码迷 >> 综合 >> clip-path 绘制五角星
  详细解决方案

clip-path 绘制五角星

热度:23   发布时间:2024-02-01 04:37:34.0

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/

 

  相关解决方案