马黑黑 发表于 2023-6-24 07:47

纯CSS+HTML正五角星

<style>
.star5 {
        margin: var(--bw);
        width: 0;
        height: 0;
        border-left: var(--bw) solid transparent;
        border-right: var(--bw) solid transparent;
        border-top: calc(var(--bw) * tan(36deg)) solid red;
        position: relative;
        --bw: 120px;
}
.star5::before, .star5::after {
        position: absolute;
        content: '';
        border-left: inherit;
        border-right: inherit;
        border-top: inherit;
        transition: .6s;
}

.star5:hover::before { border-top-color: green; opacity: .5; }
.star5:hover::after { border-top-color: blue; opacity: .5; }

.star5::before{ transform: translate(-50%,-100%) rotate(70deg); }
.star5::after{ transform: translate(-50%,-100%) rotate(-70deg); }

</style>

<p>鼠标移动到五角星，会呈现组成正五角星三个三角形：<br><br></p>
<div class="star5"></div>

马黑黑 发表于 2023-6-24 07:51

本帖最后由 马黑黑 于 2023-6-24 07:56 编辑

代码

<style>
.star5{
/* 用元素的边框 border 绘制正五角星
   正五角星由三个特殊等腰三角形旋转拼凑而成
   底角36°，设等边为 bw，则 底边 = bw*tan(36)
   一个三角形保持原样，另两个三角形移动(-50%,-100%) 且分别旋转 70deg 和 -70deg
*/
        margin: var(--bw);
        width: 0;
        height: 0;
        border-left: var(--bw) solid transparent;
        border-right: var(--bw) solid transparent;
        border-top: calc(var(--bw) * tan(36deg)) solid red;
        position: relative;
        --bw: 200px;
}
.star5::before, .star5::after {
        position: absolute;
        content: '';
        border-left: inherit;
        border-right: inherit;
        border-top: inherit;
}
.star5::before{ transform: translate(-50%,-100%) rotate(70deg); }
.star5::after{ transform: translate(-50%,-100%) rotate(-70deg); }
</style>

<div class="star5"></div>

马黑黑 发表于 2023-6-24 08:00

最简单的纯CSS+HTML正五角星，使用 clip-path 裁剪，元素尺寸可随意更改：

<style>
#mydiv {
        width: 200px;
        height: 200px;
        background: tan;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
</style>

<div id="mydiv"></div>

红影 发表于 2023-6-24 10:23

还真是三个三角形呢，有趣{:4_187:}

红影 发表于 2023-6-24 10:25

马黑黑 发表于 2023-6-24 08:00
最简单的纯CSS+HTML正五角星，使用 clip-path 裁剪，元素尺寸可随意更改：

还是裁剪的这个更简洁{:4_204:}

梦缘 发表于 2023-6-24 10:34

问好老师，欣赏精彩佳作，谢谢分享！{:4_180:}

醉美水芙蓉 发表于 2023-6-24 12:12

马黑黑 发表于 2023-6-24 12:34

红影 发表于 2023-6-24 10:25
还是裁剪的这个更简洁

对的

马黑黑 发表于 2023-6-24 12:34

红影 发表于 2023-6-24 10:23
还真是三个三角形呢，有趣

读小学时我们是这么画五角星的{:4_170:}

马黑黑 发表于 2023-6-24 12:35

醉美水芙蓉 发表于 2023-6-24 12:12
奇怪怎么看不见效果呢？

浏览器不支持 CSS 的 tan 函数，浏览器内核版本低的都会如此。

醉美水芙蓉 发表于 2023-6-24 14:55

南无月 发表于 2023-6-24 17:50

第一次看到这样三角形组合，学到了{:4_199:}

马黑黑 发表于 2023-6-24 17:53

本帖最后由 马黑黑 于 2023-6-24 17:54 编辑

南无月 发表于 2023-6-24 17:50
第一次看到这样三角形组合，学到了
我读小二的时候就有人这么教我们了

马黑黑 发表于 2023-6-24 17:54

醉美水芙蓉 发表于 2023-6-24 14:55
老师可以推荐一款浏览器吗？

我一直推荐百分浏览器：

http://www.centbrowser.cn/

南无月 发表于 2023-6-24 17:55

马黑黑 发表于 2023-6-24 17:53
我读小二的时候就有人这么教我们了

我小时候读的二小{:4_170:}

马黑黑 发表于 2023-6-24 17:56

南无月 发表于 2023-6-24 17:55
我小时候读的二小

二小比一小强

红影 发表于 2023-6-24 18:47

马黑黑 发表于 2023-6-24 12:34
对的

简洁了才更好。{:4_187:}

红影 发表于 2023-6-24 18:48

马黑黑 发表于 2023-6-24 12:34
读小学时我们是这么画五角星的

小学时候的事儿都忘了，黑黑还记得啊，厉害。{:4_173:}

马黑黑 发表于 2023-6-24 19:27

红影 发表于 2023-6-24 18:48
小学时候的事儿都忘了，黑黑还记得啊，厉害。

人老了就记得住小时候的事情

马黑黑 发表于 2023-6-24 19:28

红影 发表于 2023-6-24 18:47
简洁了才更好。

差不多吧
页: [1] 2 3 4 5 6 7
查看完整版本: 纯CSS+HTML正五角星