Jym好😘，我是珑墨，今天给大家分享 如何用CSS敲个面积图 ，嘎嘎的😍，看下面
一、敲写HTML
为了简化起见，我们将使用标签作为单个数据项的包装器和元素。你可以根据需要在项目中使用任何其他 HTML 标记。<ul> <li>
<ul class="area-chart">
<li> 40% </li>
<li> 80% </li>
<li> 60% </li>
<li> 100% </li>
<li> 30% </li>
</ul>
CSS 无法检索内部 HTML 文本，这就是为什么我们将使用 CSS 自定义属性将数据传递给我们的 CSS。每个数据项将具有一个和自定义属性。--start --end
<ul class="area-chart">
<li style="--start: 0.1; --end: 0.4;"> 40% </li>
<li style="--start: 0.4; --end: 0.8;"> 80% </li>
<li style="--start: 0.8; --end: 0.6;"> 60% </li>
<li style="--start: 0.6; --end: 1.0;"> 100% </li>
<li style="--start: 1.0; --end: 0.3;"> 30% </li>
</ul>
二、以下是我们需要考虑的...
在进入样式之前，我们应该考虑几个设计原则：
- 单位数据： 我们将在 HTML 中使用无单位数据（即没有或任何其他单位）和自定义属性将是介于 0 和 1 之间的数字。
px em rem % --start --end - 列宽： 我们不会为每个元素设置固定值。我们也不会使用，因为我们不知道那里有多少项目。每列宽度将基于主包装器宽度除以数据项的总数。在我们的例子中，这是元素的宽度除以元素的数量。
width <li> % <ul> <li> - 可选性： 每个值是可选的，只有自定义属性是必需的。
<li> --start --end
三、 考虑好设计原则，开敲！😎
让我们先从总体布局样式开始。图表包装器元素是一个弹性容器，它连续显示项目，拉伸每个子元素，以便填充整个区域。
.area-chart {
/* Reset */
margin: 0;
padding: 0;
border: 0;
/* Dimensions */
width: 100%;
max-width: var(--chart-width, 100%);
height: var(--chart-height, 300px);
/* Layout */
display: flex;
justify-content: stretch;
align-items: stretch;
flex-direction: row;
}
如果面积图包装器是一个列表，我们应该删除列表样式，以便为我们提供更大的样式灵活性。
ul.area-chart,
ol.area-chart {
list-style: none;
}
此代码设置整个图表中所有列的样式。对于条形图，它很简单：我们对每一列都使用 和。对于区域字符 ，我们将使用该属性来设置应显示的区域。background-color height clip-path
首先，我们设置每列：
.area-chart > * {
/* Even size items */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
/* Color */
background: var(--color, rgba(240, 50, 50, .75));
}
为了创建一个覆盖整个区域的矩形，我们将到达该属性并使用其包含该区域坐标的函数。目前这基本上不会做任何事情，因为多边形涵盖了所有内容：clip-path polygon()
.area-chart > * {
clip-path: polygon(
0% 0%, /* top left */
100% 0%, /* top right */
100% 100%, /* bottom right */
0% 100% /* bottom left */
);
}
ok！
为了仅显示列的一部分，我们对其进行剪辑以创建类似面积图的效果。为了只显示我们想要的区域，我们在多边形内使用 和 自定义属性：--start --end clip-path
.area-chart > * {
clip-path: polygon(
0% calc(100% * (1 - var(--start))),
100% calc(100% * (1 - var(--end))),
100% 100%,
0% 100%
);
}
这一点CSS就完成了基本的轮廓。以下是我们得到的：
四、使用多个数据集
现在我们知道了基础的轮廓怎么画，为了展现出逼真多维的面积图！让我们创建一个包含多个数据集的吧。面积图通常测量多组数据，其效果是数据的分层比较。这种图表需要几个子元素，因此我们将用 .<ul> <table>
<table class="area-chart">
<tbody>
<tr>
<td> 40% </td>
<td> 80% </td>
</tr>
<tr>
<td> 60% </td>
<td> 100% </td>
</tr>
</tbody>
</table>
表格是可访问的，对搜索引擎友好。如果样式表由于某种原因没有加载，所有数据在标记中仍然可见。
同样，我们将使用数字介于 0 和 1 之间的 和 自定义属性。--start --end
<table class="area-chart">
<tbody>
<tr>
<td style="--start: 0; --end: 0.4;"> 40% </td>
<td style="--start: 0; --end: 0.8;"> 80% </td>
</tr>
<tr>
<td style="--start: 0.4; --end: 0.6;"> 60% </td>
<td style="--start: 0.8; --end: 1.0;"> 100% </td>
</tr>
</tbody>
</table>
因此，首先我们将设置包装元素（表格）的总体布局样式，我们给它一个类：.area-chart
.area-chart {
/* Reset */
margin: 0;
padding: 0;
border: 0;
/* Dimensions */
width: 100%;
max-width: var(--chart-width, 600px);
height: var(--chart-height, 300px);
}
接下来，我们将使元素成为一个 flex 容器，以行形式显示项目并均匀大小：<tbody> <tr>
.area-chart tbody {
width: 100%;
height: var(--chart-height, 300px);
/* Layout */
display: flex;
justify-content: stretch;
align-items: stretch;
flex-direction: row;
}
.area-chart tr {
/* Even size items */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
现在我们需要让元素相互覆盖，一个元素彼此重叠，这样我们才能获得分层效果。每个都覆盖了包含它的元素的整个区域。<td> <td> <tr>
.area-chart tr {
position: relative;
}
.area-chart td {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
让我们把神奇的力量派上用场吧！🤩我们只显示 和 自定义属性之间的区域，这些属性也是介于 0 和 1 之间的值：clip-path: polygon() --start --end
.area-chart td {
clip-path: polygon(
0% calc(100% * (1 - var(--start))),
100% calc(100% * (1 - var(--end))),
100% 100%,
0% 100%
);
}
现在让我们为每一个添加颜色：
.area-chart td {
background: var(--color);
}
.area-chart td:nth-of-type(1) {
--color: rgba(50, 240, 161, 0.75);
}
.area-chart td:nth-of-type(2) {
--color: rgba(37, 181, 238, 0.75);
}
.area-chart td:nth-of-type(3) {
--color: rgba(189, 90, 255, 0.75);
}
使用不透明度的颜色以获得更好的效果非常重要，这就是我们使用值的原因。rgba() hsla()
完成后，看下面效果：😍
五、总结下
是不是很简单！😂无论我们向图表中添加多少 HTML 元素，基于 flex 的布局都能确保所有条目的大小相同。这样，我们只需要设置换行图表元素的宽度，条目就会相应地调整为响应式布局。ok！
感谢jym浏览本文，共同进步🤞，若有更好的建议，欢迎评论区讨论哈🌹。
