CSS寫折線圖是前端開發中常見需求之一，它可以用于展示數據隨時間變化的趨勢。

/* 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的各種屬性，可以實現各種不同的折線圖效果。