用clip-path画个简易的星星

马黑黑

一个简易的星星形状，可以简单到像一个尖角十字架，如此，可以视为由四个三角形拼接而成的东东，若用盒子的border来模拟，用到的盒子会有好几个，拼接起来也繁琐。我们可以使用clip-path方法实现，这要简单得多。先看效果：

这个效果的CSS和HTML代码如下：

<style>
.star {
   width: 200px;
   height: 200px;
   background: lightblue;
   clip-path: polygon(0% 50%,45% 45%,50% 0%,55% 45%,100% 50%,55% 55%, 50% 100%,45% 55%, 0% 50%);
}
</style>

<div class="star"></div>

这里，CSS代码中，需要解释的是 clip-path 属性：

polygon 表示剪裁一个多边形，括号里是多边形的路径。路径由若干组 {xy} 坐标点构成，各组之间有逗号隔开。比如头尾两组，0% 50%，表示那个点在水平方向（下称x）的 0%、纵向方向（下称y）的 50% 处，对应的是最左边尖角的位置；再比如第二组，xy 分别为 {45% 45%}，指向星星的中心部分中左上角的交点处，其它组依此类推。

clip-path 剪裁简易星星，其实定位好八个点就行，我的代码有九个点，其中头尾是一样的，最末那一组{xy}可以不要，CSS没有指定回到原点的点它也认得路，polygon总是要闭合的。

千羽

千羽

黑黑老师的简易星星好漂亮

马黑黑

千羽 发表于 2022-5-9 19:27
黑黑老师的简易星星好漂亮

再漂亮也没得羽图漂亮

加林森

真漂亮的制作，老黑好样的！

红影

一直不太理解这里的坐标系是怎样的，x轴是向上？y在哪个方向？中心点是盒子的重心吧？

红影

第二点45% 45%,，第四点55% 45%, 若是原点为重心，觉得这两个点很近才对，应该弄不出上面的图形。我还是去搜一下看看吧。。。

梦油

黑黑朋友晚上好！我看到不少音像作品里有星星的元素，可见星星的使用率还是很高的，学会星星图案的制作大有用武之地。

我是个门外汉，只是“看热闹”，当然，说不到点子上。我一来支持，二来是欣赏。

红影

明白了，我又忘记了，记得黑黑说过x是3点钟方向，y就是6点钟方向了。原来原点是左上角。现在都说得通了。

马黑黑

加林森 发表于 2022-5-9 20:47
真漂亮的制作，老黑好样的！

马黑黑

醉美水芙蓉 发表于 2022-5-9 21:45
欣赏版主老师精彩讲解！

晚上好，请

马黑黑

红影 发表于 2022-5-9 21:27
明白了，我又忘记了，记得黑黑说过x是3点钟方向，y就是6点钟方向了。原来原点是左上角。现在都说得通了。{: ...

不同属性，算法不同。这个剪裁，你从哪儿开始都可以，没有规定。

马黑黑

梦油 发表于 2022-5-9 21:19
黑黑朋友晚上好！我看到不少音像作品里有星星的元素，可见星星的使用率还是很高的，学会星星图案的制作大有 ...

你理解的完全正确

加林森

加林森

马黑黑 发表于 2022-5-9 21:46

马黑黑

红影 发表于 2022-5-9 21:10
一直不太理解这里的坐标系是怎样的，x轴是向上？y在哪个方向？中心点是盒子的重心吧？

平面上的每一个点，都可以用{xy}坐标来表示，比如说，矩形的左上角，{xy} = {0 0} 或 {0% 0%}；再比如圆心，{xy} = {50% 50%}，则表示圆心在参照系里的正中央。

x是水平方形的标记，y是垂直方向的标记，二者合起来，可以定义一个点在参照体系中的二维位置。

马黑黑

红影 发表于 2022-5-9 21:18
第二点45% 45%,，第四点55% 45%, 若是原点为重心，觉得这两个点很近才对，应该弄不出上面的图形。我还是去 ...

你从哪一个点画都行，最后要画到这个点就能闭合（最后一个点就是最开始的那个点，可以省略）。

岩新新

欣赏精彩制作！

马黑黑

岩新新 发表于 2022-5-10 07:20
欣赏精彩制作！

朋友早上好