论坛 › 马黑黑教程专版 › 用clip-path画个简易的星星

马黑黑 发表于 2022-5-9 18:34

用clip-path画个简易的星星

<style>
.mnDiv p { padding: 8px 0; }
.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="mnDiv">
    <p>一个简易的星星形状，可以简单到像一个尖角十字架，如此，可以视为由四个三角形拼接而成的东东，若用盒子的border来模拟，用到的盒子会有好几个，拼接起来也繁琐。我们可以使用clip-path方法实现，这要简单得多。先看效果：</p>
    <div class="star"></div>
    <p>这个效果的CSS和HTML代码如下：</p>
<pre>&lt;style&gt;
<span style="color: red;">.star </span>{
&nbsp; &nbsp;<span style="color: blue;">width</span>: 200px;
&nbsp; &nbsp;<span style="color: blue;">height</span>: 200px;
&nbsp; &nbsp;<span style="color: blue;">background</span>: lightblue;
&nbsp; &nbsp;<span style="color: blue;">clip-path</span>: polygon(0% 50%,45% 45%,50% 0%,55% 45%,100% 50%,55% 55%, 50% 100%,45% 55%, 0% 50%);
}
&lt;/style&gt;

&lt;<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"star"</span>&gt;&lt;<span style="color: darkred">/div</span>&gt;</pre>

<p>这里，CSS代码中，需要解释的是 clip-path&nbsp;属性：</p><p>polygon&nbsp;表示剪裁一个多边形，括号里是多边形的路径。路径由若干组 {xy}&nbsp;坐标点构成，各组之间有逗号隔开。比如头尾两组，0% 50%，表示那个点在水平方向（下称x）的 0%、纵向方向（下称y）的 50% 处，对应的是最左边尖角的位置；再比如第二组，xy&nbsp;分别为 {45% 45%}，指向星星的中心部分中左上角的交点处，其它组依此类推。</p><p>clip-path&nbsp;剪裁简易星星，其实定位好八个点就行，我的代码有九个点，其中头尾是一样的，最末那一组{xy}可以不要，CSS没有指定回到原点的点它也认得路，polygon总是要闭合的。</p>

</div>

千羽 发表于 2022-5-9 19:26

<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>

千羽 发表于 2022-5-9 19:27

黑黑老师的简易星星好漂亮{:4_187:}

马黑黑 发表于 2022-5-9 20:04

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

再漂亮也没得羽图漂亮{:5_106:}

加林森 发表于 2022-5-9 20:47

真漂亮的制作，老黑好样的！{:4_199:}

红影 发表于 2022-5-9 21:10

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

红影 发表于 2022-5-9 21:18

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

梦油 发表于 2022-5-9 21:19

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

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

红影 发表于 2022-5-9 21:27

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

醉美水芙蓉 发表于 2022-5-9 21:45

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

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

{:4_190:}

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

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

晚上好，请{:4_190:}

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

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

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

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

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

你理解的完全正确

加林森 发表于 2022-5-9 21:56

本帖最后由 加林森 于 2022-5-9 21:58 编辑 <br /><br /><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>

加林森 发表于 2022-5-9 21:59

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


{:4_191:}

马黑黑 发表于 2022-5-9 22:39

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

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

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

马黑黑 发表于 2022-5-9 22:41

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

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

岩新新 发表于 2022-5-10 07:20

欣赏精彩制作！

马黑黑 发表于 2022-5-10 07:23

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

朋友早上好

查看完整版本: 用clip-path画个简易的星星