纯HTML+CSS画五角星

马黑黑 · 发表于 2022-9-29 22:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-9-29 22:17 编辑

国庆将至，学习画个五角星应该极有意义。

画五角星实际上用到中学的几何知识，这里，为了简化，不做数学方面的解释，仅提供画法。

方法一：我们先用最简单的方法绘制：clip-path: polygon(5对xy坐标值)。

CSS酱紫写：

.star5_1 {
      width: 200px;
      height: 200px;
      background: red;
      clip-path: polygon(100px 0, 160px 180px, 10px 60px, 190px 60px, 40px 180px);
}

HTML就简单了：

<div class="star5_1"></div>

然后，若想放大或缩小，都可以的：

<div class="star5_1" style="transform: scale(2);"></div>

这是放大一倍了。如果是缩小一半，scale(2) 改为 scale(0.5) 便可。

这个画法，因为是用剪裁方式，无法直接给它弄阴影，需要特殊处理，比如给它添加一个伪元素用来模拟阴影。

方法二：再来看看略微复杂一点的：用三个三角形拼接，可以在单标签里完成，使用两个伪元素。

这个法子的CSS代码多一些：

.star5_2 {
      position: relative;
      width: 0;
      height: 0;
      border-width: 0 100px 70px 100px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      transform: rotate(35deg);
}

.star5_2::before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      left: -65px;
      top: -45px;
      border-width: 0 30px 80px 30px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      transform: rotate(-35deg);
}

.star5_2::after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      left: -105px;
      top: 3px;
      border-width: 0 100px 70px 100px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      transform: rotate(-70deg);
}

HTML部分，就一句：

<div class="star5_2"></div>

用这个法子画出的五角星，也可以用 transform:scale(数值) 来放大、缩小，也不会失真。还可以给它弄阴影，最好使用filter滤镜，如：filter: drop-shadow(0 0 12 #000)。