用css制作火车图标
使用CSS制作火车图标
通过纯CSS可以绘制简单的火车图标，主要利用::before、::after伪元素和边框属性构建车厢、车轮等部件。以下是实现方案：
基础结构
HTML部分只需一个容器元素：
<div class="train"></div>CSS样式设计
.train {
position: relative;
width: 120px;
height: 60px;
background: #FF5733;
border-radius: 10px;
margin: 50px auto;
}
/* 火车头部 */
.train::before {
content: '';
position: absolute;
left: -20px;
top: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 0;
border-color: transparent #FF5733 transparent transparent;
}
/* 车窗 */
.train::after {
content: '';
position: absolute;
width: 30px;
height: 20px;
background: #85C1E9;
border-radius: 5px;
left: 15px;
top: 10px;
}
/* 车轮 */
.wheel {
position: absolute;
width: 20px;
height: 20px;
background: #333;
border-radius: 50%;
bottom: -10px;
}
.wheel.left { left: 20px; }
.wheel.right { right: 20px; }完整实现代码
<!DOCTYPE html>
<html>
<head>
<style>
.train {
position: relative;
width: 120px;
height: 60px;
background: #FF5733;
border-radius: 10px;
margin: 50px auto;
}
.train::before {
content: '';
position: absolute;
left: -20px;
top: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 0;
border-color: transparent #FF5733 transparent transparent;
}
.train::after {
content: '';
position: absolute;
width: 30px;
height: 20px;
background: #85C1E9;
border-radius: 5px;
left: 15px;
top: 10px;
}
.wheel {
position: absolute;
width: 20px;
height: 20px;
background: #333;
border-radius: 50%;
bottom: -10px;
}
.wheel.left { left: 20px; }
.wheel.right { right: 20px; }
</style>
</head>
<body>
<div class="train">
<div class="wheel left"></div>
<div class="wheel right"></div>
</div>
</body>
</html>进阶优化
增加烟囱和连接器：
/* 烟囱 */
.chimney {
position: absolute;
width: 10px;
height: 25px;
background: #333;
top: -25px;
left: 80px;
}
/* 车厢连接器 */
.connector {
position: absolute;
width: 10px;
height: 5px;
background: #333;
right: -10px;
top: 25px;
}多节车厢版本
通过复制HTML结构并调整位置即可实现多节车厢：
<div class="train-container">
<div class="train engine">
<div class="wheel left"></div>
<div class="wheel right"></div>
<div class="chimney"></div>
<div class="connector"></div>
</div>
<div class="train carriage">
<div class="wheel left"></div>
<div class="wheel right"></div>
</div>
</div>对应的CSS调整：
.train-container {
display: flex;
align-items: center;
}
.carriage {
margin-left: 30px;
background: #3498DB;
}这种方法通过组合基本的CSS形状属性，无需图片即可创建矢量风格的火车图标，适合需要轻量级图标的场景。
