Html 十二点星如何正确工作？

我是前端开发人员的新手，正在学习css基础知识，我可以理解以下代码

#十二点星{
高度：100px；
宽度：100px；
利润率：30像素；
背景：蓝色；
位置：绝对位置；
}
#十二点星：之前{
高度：100px；
宽度：100px；
背景：蓝色；
内容：“；
位置：绝对位置；
/*轮换*/
-moz变换：旋转（30度）；
-webkit变换：旋转（30度）；
-ms变换：旋转（30度）；
-o变换：旋转（30度）；
变换：旋转（30度）；
}
#十二点星：之后{
高度：100px；
宽度：100px；
背景：蓝色；
内容：“；
位置：绝对位置；
/*轮换*/
-moz变换：旋转（-30度）；
-webkit变换：旋转（-30度）；
-ms变换：旋转（-30度）；
-o变换：旋转（-30度）；
变换：旋转（-30度）；
}

十二点星

---

请看……您总共需要12颗星。如果您仅应用css

#十二点星

，您将获得4个角点…您还需要8个角点…因为您使用了

：before

获得4个角点，使用

：after

获得最后4个角点伪类获得总共12个角点

尝试改变颜色，你会看到真实的视觉效果

堆栈片段

#十二点星{
高度：100px；
宽度：100px；
利润率：30像素；
背景：蓝色；
位置：绝对位置；
}
#十二点星：之前{
高度：100px；
宽度：100px；
背景：红色；
内容：“；
位置：绝对位置；
/*轮换*/
-moz变换：旋转（30度）；
-webkit变换：旋转（30度）；
-ms变换：旋转（30度）；
-o变换：旋转（30度）；
变换：旋转（30度）；
}
#十二点星：之后{
高度：100px；
宽度：100px；
背景：黑色；
内容：“；
位置：绝对位置；
/*轮换*/
-moz变换：旋转（-30度）；
-webkit变换：旋转（-30度）；
-ms变换：旋转（-30度）；
-o变换：旋转（-30度）；
变换：旋转（-30度）；
}

十二角星

意味着在每个#十二点星之前，#十二点星：before中的css将应用于#十二点星。同样适用于：after，除了它位于每个#12点星之后。所以代码中发生的事情是，你基本上做了3个正方形，它们朝着不同的方向旋转，这就产生了这种效果

---

这是学习css的一个很好的来源。

它是3个aquares-

在
之前和
之后在不同方向旋转30度。您可以在浏览器中使用devtools查看它。如果没有
之前
和
之后
这将只是一个简单的蓝色正方形。嗨，我可以在不使用：：before和：：after snippet的情况下实现此形状吗？如果需要，可以使用3个具有不同ID的div。然后将：before和：after替换为#y和#z。这将产生相同的结果。我可以不使用：：before and after获得此形状吗？@SelvaGanapathi您可以使用
svg
来制作这种形状。但是，为此，您必须学习
svg
…作为html/css的新成员，您对解决方案很在行。
svg
:before