css流程图标 |css3图片向左滑动

/* CSS代码示例 */
.icon-container {
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.icon-arrow {
width: 20px;
height: 20px;
transform: rotate(45deg);
border-right: 2px solid #000;
border-top: 2px solid #000;
}
.icon-circle {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000;
}

上述代码中，大家定义了两种元素样式：.icon-container和.icon-arrow。.icon-container是图标整体容器的样式，具有宽高、背景色等基本属性，并使用了flex布局使其居中显示。.icon-arrow则是箭头图标的样式，使用了rotate变形将正方形改为平行四边形，并通过border属性绘制出黑色的箭头图案。此外，大家还定义了一个.icon-circle元素，用于表示圆形的状态节点。

在使用这种流程图标时，一般是按顺序排列多个.icon-container元素，并在其中嵌套.icon-arrow和.icon-circle元素，以表示流程的先后顺序。预期的效果如下图所示：

通过这种方式，大家可以快速地搭建出一个简单的、可重复使用的流程图标。