css小火车素材 |css calc height

.train {
width: 100px;
height: 50px;
background: #f00;
position: relative;
border-radius: 0 0 50% 50%;
}
.train:before {
content: '';
display: block;
position: absolute;
top: 0;
left: -50%;
width: 0;
height: 0;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
border-right: 50px solid #f00;
}
.train:after {
content: '';
display: block;
position: absolute;
top: 0;
right: -50%;
width: 0;
height: 0;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
border-left: 50px solid #f00;
}
.train .box {
position: absolute;
top: 7px;
left: 20px;
width: 60px;
height: 36px;
background: #fff;
border-radius: 15px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.train .wheel {
position: absolute;
bottom: 5px;
width: 20px;
height: 20px;
background: #000;
border-radius: 10px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.train .wheel.left {
left: 20px;
}
.train .wheel.right {
right: 20px;
}

小火车基于纯CSS的设计，可以通过小调整来适应各种不同场景的需求。不需要使用任何的图片或其他外部资源，使得它的使用十分方便。从设计的角度来说，小火车的外观简洁特别，所以在需要增加一些趣味性的场合下，小火车的使用是一种很不错的选择。

总之，CSS小火车素材是一款非常有趣而实用的UI设计素材。如果你正在寻找一个特殊的、引人注目的元素来为你的项目增加一些趣味性，那么你一定会喜欢这个小火车素材。