css3做曲线图

CSS3是一种新的样式语言，可以用来创建出各种炫酷的效果。其中之一就是曲线图。在这篇文章中，我们将介绍如何使用CSS3制作一个简单的曲线图。

首先，我们需要一个包含数据的表格。以下是我们的示例数据：

月份	销售额
一月	5000
二月	7000
三月	10000
四月	12000
五月	15000

接下来，我们需要使用CSS3中的伪元素来制作曲线图。以下是示例代码：

table {
  position: relative;
  margin-top: 50px;
  border-collapse: collapse;
}
table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  height: 100%;
  width: 100%;
  transform: rotate(-45deg);
}
table td:first-child::before {
  content: attr(data-label);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
}
table td:nth-child(2)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: calc(var(--value) / 200 * 100%);
  background-color: blue;
}
table td:last-child::before {
  content: attr(data-value);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
}

以上代码中，我们使用了before伪元素来创建曲线图。我们使用border-left和border-bottom属性来创建45度角的线条，并使用transform属性将其旋转。我们还为td元素的before伪元素创建了data-label和data-value属性，这将用于显示月份和销售额。

我们还使用了自定义属性--value来设置高度，这将根据销售额来计算得出。我们使用blue颜色作为横坐标。

最后，我们使用position属性将曲线图绘制到正确的位置。

这是一个非常简单的例子，您可以进一步探索CSS3和其各种功能来创建更复杂的曲线图。希望这篇文章对您有所帮助！