Html CSS的形状-星星。它是如何工作的？

下面是代码。我想在这里详细了解CSS属性。CSS中的形状是如何工作的？伪CSS、边框和CSS3属性。需要澄清一些关于核心CSS属性的概念

#五星级酒店{
利润率：50px0；
位置：相对位置；
显示：块；
颜色：红色；
宽度：0px；
高度：0px；
右边框：100px实心透明；
边框底部：70px纯红；
左边框：100px实心透明；
-moz变换：旋转（35度）；
-webkit变换：旋转（35度）；
-ms变换：旋转（35度）；
-o变换：旋转（35度）；
}
#五星级：之前{
边框底部：80px实心红色；
左边框：30px实心透明；
右边框：30px实心透明；
位置：绝对位置；
身高：0；
宽度：0；
顶部：-45px；
左：-65px；
显示：块；
内容：''；
-webkit变换：旋转（-35度）；
-moz变换：旋转（-35度）；
-ms变换：旋转（-35度）；
-o变换：旋转（-35度）；
}
#五星级：之后{
位置：绝对位置；
显示：块；
颜色：红色；
顶部：3px；
左：-105px；
宽度：0px；
高度：0px；
右边框：100px实心透明；
边框底部：70px纯红；
左边框：100px实心透明；
-webkit变换：旋转（-70度）；
-moz变换：旋转（-70度）；
-ms变换：旋转（-70度）；
-o变换：旋转（-70度）；
内容：''；
}

---

这颗星是由三个三角形组成的，它们被移动到正确的角度和位置：

三角形1：

#五星级酒店{
利润率：50px0；
位置：相对位置；
显示：块；
颜色：红色；
宽度：0px；
高度：0px；
右边框：100px实心透明；
边框底部：70px纯红；
左边框：100px实心透明；
-moz变换：旋转（35度）；
-webkit变换：旋转（35度）；
-ms变换：旋转（35度）；
-o变换：旋转（35度）；
}

---

这可能是一种更好的可视化方法

#五星级酒店{
利润率：50px0；
位置：相对位置；
显示：块；
颜色：红色；
宽度：0px；
高度：0px；
右边框：100px实心透明；
边框底部：70px纯红；
左边框：100px实心透明；
-moz变换：旋转（35度）；
-webkit变换：旋转（35度）；
-ms变换：旋转（35度）；
-o变换：旋转（35度）；
}
#五星级：之前{
边框底部：80px纯蓝色；
左边框：30px实心透明；
右边框：30px实心透明；
位置：绝对位置；
身高：0；
宽度：0；
顶部：-45px；
左：-65px；
显示：块；
内容：''；
-webkit变换：旋转（-35度）；
-moz变换：旋转（-35度）；
-ms变换：旋转（-35度）；
-o变换：旋转（-35度）；
}
#五星级：之后{
位置：绝对位置；
显示：块；
颜色：红色；
顶部：3px；
左：-105px；
宽度：0px；
高度：0px；
右边框：100px实心透明；
边框底部：70px纯绿；
左边框：100px实心透明；
-webkit变换：旋转（-70度）；
-moz变换：旋转（-70度）；
-ms变换：旋转（-70度）；
-o变换：旋转（-70度）；
内容：''；
}

这将创建一个指向上的矩形，然后将其旋转35度

#star-five:after{}

它也是一个矩形（与主矩形大小相同），但旋转和移动方式不同

#star-five:before{}

有点不同，是不是一个较小的矩形（你可以通过改变每个边框的灌木丛来改变每个矩形的大小

border-bottom: 70px solid red; (change 70px here for example)

然后，每个矩形移动到一个位置，形成一个星形

---

重要的是：before和：after有内容：“

基本上有三个三角形，每个三角形的旋转方式不同。检查元素以查看它们。尝试使用颜色和宽度属性等来获得最佳学习体验！

border-bottom: 70px solid red; (change 70px here for example)