css实现菊花图 |css3 弧线运动

css from input，css按键怎么居中，css相对某个元素位置，css3波动线，阶梯进度条样式css，css 鼠标悬停图片样式，css3 弧线运动 css实现菊花图 |css3 弧线运动

/* 设置小三角形的样式 */
.triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 60px 0 60px 104.5px; /*设置边框宽度，形成三角形*/
}
/* 设置不同颜色的三角形 */
.red {
border-color: transparent transparent transparent #ff0000; /*设置边框颜色*/
}
.green {
border-color: transparent transparent transparent #00ff00;
}
.blue {
border-color: transparent transparent transparent #0000ff;
}
/* 设置每个小三角形的位置 */
.triangle1 {
top: 0;
left: 0;
}
.triangle2 {
top: 0;
right: 0;
}
.triangle3 {
bottom: 0;
left: 0;
}
.triangle4 {
bottom: 0;
right: 0;
}
/* 将小三角形组合成菊花图 */
.container {
position: relative;
width: 200px;
height: 200px;
}

通过以上CSS代码，大家定义了小三角形的样式和位置信息，并将其组合成菊花图，接下来在HTML中添加代码即可：

这样，就能在网页中看到一个美丽的菊花图啦！