图表在css中怎么写「html 图表」

1. 使用CSS形状和边框属性创建基本图表

我们可以使用CSS的border-radius属性来创建圆形、椭圆形或圆角矩形。例如，以下代码将创建一个圆形：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
}

1. 使用CSS渐变创建颜色图表

我们可以使用CSS的linear-gradient或radial-gradient函数来创建颜色渐变。例如，以下代码将创建一个从左到右的线性渐变：

.gradient {
  width: 200px;
  height: 100px;
  background: linear-gradient(to right, red, yellow, green);
}

1. 使用CSS动画创建动态图表

我们可以使用CSS的@keyframes规则来创建动画。例如，以下代码将创建一个旋转的圆形：

.rotate {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

1. 使用SVG和CSS结合创建复杂图表

SVG（可缩放矢量图形）是一种用于描述二维矢量图形的XML标记语言。我们可以使用SVG来创建复杂的图表，然后使用CSS来样式化这些图表。例如，以下代码将创建一个饼图：

<svg viewBox="0 0 32 32" class="pie">
  <path class="slice" d="M16,16 L16,32 A16,16 0 0,1 32,32 L32,16 Z"></path>
</svg>

然后在CSS中添加样式：

.pie {
  width: 100px;
  height: 100px;
}

.slice {
  fill: red;
}

以上就是在CSS中创建和设计图表的一些基本方法。然而，需要注意的是，虽然CSS可以创建一些基本的图表，但对于复杂的图表，如条形图、折线图等，我们通常需要使用JavaScript或其他更强大的工具。