css写折线图 |css3怎么缩放

/* HTML */
<div class="graph">
<div class="line"></div>
<div class="point point1"></div>
<div class="point point2"></div>
<div class="point point3"></div>
<div class="point point4"></div>
<div class="point point5"></div>
</div>
/* CSS */
.graph {
border: 1px solid #ccc;
height: 200px;
width: 400px;
position: relative;
}
.line {
border-bottom: 1px solid #ccc;
height: 90%;
width: 90%;
position: absolute;
bottom: 10%;
left: 5%;
}
.point {
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #ccc;
position: absolute;
bottom: 10%;
}
.point1 {
left: 10%;
}
.point2 {
left: 30%;
}
.point3 {
left: 50%;
}
.point4 {
left: 70%;
}
.point5 {
left: 90%;
}
/* 当鼠标滑过折线图上的点时，点变色 */
.point:hover {
background-color: #f00;
}

上面这段代码实现了一个简单的折线图，代码中的点和线可以根据具体需求进行改变。其中，主要通过设置position绝对定位的方式将线和点放置在合适的位置上，通过border和background-color属性来定义线和点的样式，通过:hover伪类来实现当鼠标滑过点时点变色的效果。

除此之外，还可以利用CSS3的transform属性来实现平滑过渡的动画效果，使折线图变得更加生动。同时，可以将折线图组件化，以便在不同的页面中重复使用。

总之，利用CSS写折线图是一种简单而实用的前端开发技巧，通过灵活运用CSS的各种属性，可以实现各种不同的折线图效果。