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

纯HTML+CSS画五角星

本帖最后由 马黑黑 于 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)。

马黑黑 发表于 2022-9-29 22:16

<style>
.star5_1 {
      width: 200px;
      height: 200px;
      background: red;
      clip-path: polygon(100px 0, 160px 180px, 10px 60px, 190px 60px, 40px 180px);
}
.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);
}
</style>

<div class="star5_1"></div>
<p><br><br><br><br><br></p>
<div class="star5_2"></div>

马黑黑 发表于 2022-9-29 22:16

上楼，第一个五角星用第一种方法，第二个五角星用第二种方法

马黑黑 发表于 2022-9-29 22:18

五角星还有纯文本画法：

★
☆

红影 发表于 2022-9-29 23:06

用边框宽度画三角形记得黑黑讲过的，一下子忘记是怎么回事了，去搜了半天才整明白。这个真比较复杂呢{:4_173:}

红影 发表于 2022-9-29 23:08

第一种方法的也可以变动态的吧？就像那颗心一样{:4_173:}

红影 发表于 2022-9-29 23:08

纯文本画法最简单{:4_189:}

马黑黑 发表于 2022-9-30 06:04

本帖最后由 马黑黑 于 2022-9-30 06:09 编辑 <br /><br /><div id="s_out">
        <p>测试js输出五角星符号: 直接输出和 \u2605 以及 \u2b50<br><br></p>
</div>

<script>
let txt = '★ \u2605 \u2b50';
s_out.innerHTML += txt;
</script>
页: [1]
查看完整版本: 纯HTML+CSS画五角星