You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CSS星型拓扑图技术求助：气泡文本溢出及改为云形

avatar
数据老陈
2026-7-12
星型拓扑图问题解决方案

一、修复文本溢出与方向错位问题

问题根源是旋转容器时内部文本同步旋转，且未做文本适配处理。解决思路：

  • 给每个设备添加独立文本容器，对文本反向旋转抵消容器旋转效果
  • 给文本容器添加内边距、自动换行和最大宽度限制，避免溢出

修改后的HTML（添加文本） 

<figure style="--number-connectedDevices: 8">
  <div class="central-device">
    <span class="device-label">中心设备</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备1</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备2</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备3</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备4</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备5</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备6</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备7</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备8</span>
  </div>
</figure>

对应的CSS修改（文本处理）

在原有CSS基础上补充：

/* 中心设备文本样式 */
.central-device {
  display: flex;
  justify-content: center;
  align-items: center;
}

.central-device .device-label {
  padding: 0 10px;
  text-align: center;
  word-wrap: break-word;
  max-width: 120px;
}

/* 连接设备文本样式 */
.connected-device {
  align-items: center; /* 新增：垂直居中文本 */
}

.connected-device .device-label {
  padding: 0 8px;
  text-align: center;
  word-wrap: break-word;
  max-width: 80px;
  /* 反向旋转，抵消容器的旋转，让文本保持水平 */
  transform: rotate(calc(-1 * var(--rotation-angle)));
}

/* 为每个连接设备设置旋转角度变量，避免重复计算 */
figure .connected-device:nth-of-type(2) {
  --rotation-angle: calc(1 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(3) {
  --rotation-angle: calc(2 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(4) {
  --rotation-angle: calc(3 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(5) {
  --rotation-angle: calc(4 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(6) {
  --rotation-angle: calc(5 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(7) {
  --rotation-angle: calc(6 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(8) {
  --rotation-angle: calc(7 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

二、替换气泡为云形状

用CSS clip-path 实现自定义云形状，替换原有圆形border-radius即可：

云形状CSS修改 

/* 中心设备云形状 */
figure .central-device {
  background: gray;
  /* 云形状的clip-path路径 */
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  width: 140px;
  height: 100px; /* 调整高度适配云形状 */
}

/* 连接设备云形状 */
figure .connected-device {
  --connectedDeviceWidth: 100px;
  --connectedDeviceHeight: 70px; /* 调整高度适配云形状 */
  width: var(--connectedDeviceWidth);
  height: var(--connectedDeviceHeight);
  position: absolute;
  background: gold;
  top: 0;
  transform-origin: calc(var(--connectedDeviceHeight) / 2) calc(var(--containerHeight) / 2);
  display: flex;
  justify-content: center;
  /* 云形状的clip-path路径 */
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}

/* 调整连接线的位置，适配云形状的高度 */
figure .connected-device::before {
  content: '';
  height: calc((var(--containerHeight) / 2) - var(--connectedDeviceHeight));
  display: block;
  border-right: 2px dashed grey;
  position: relative;
  top: var(--connectedDeviceHeight);
}

完整修改后代码

整合所有修改后的完整代码如下：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

figure {
  --containerWidth: 500px;
  --containerHeight: 500px;
  width: var(--containerWidth);
  height: var(--containerHeight);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 中心设备云形状 */
figure .central-device {
  background: gray;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  width: 140px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.central-device .device-label {
  padding: 0 10px;
  text-align: center;
  word-wrap: break-word;
  max-width: 120px;
}

/* 连接设备云形状 */
figure .connected-device {
  --connectedDeviceWidth: 100px;
  --connectedDeviceHeight: 70px;
  width: var(--connectedDeviceWidth);
  height: var(--connectedDeviceHeight);
  position: absolute;
  background: gold;
  top: 0;
  transform-origin: calc(var(--connectedDeviceHeight) / 2) calc(var(--containerHeight) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}

figure .connected-device::before {
  content: '';
  height: calc((var(--containerHeight) / 2) - var(--connectedDeviceHeight));
  display: block;
  border-right: 2px dashed grey;
  position: relative;
  top: var(--connectedDeviceHeight);
}

.connected-device .device-label {
  padding: 0 8px;
  text-align: center;
  word-wrap: break-word;
  max-width: 80px;
  transform: rotate(calc(-1 * var(--rotation-angle)));
}

/* 旋转角度设置 */
figure .connected-device:nth-of-type(2) {
  --rotation-angle: calc(1 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(3) {
  --rotation-angle: calc(2 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(4) {
  --rotation-angle: calc(3 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(5) {
  --rotation-angle: calc(4 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(6) {
  --rotation-angle: calc(5 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(7) {
  --rotation-angle: calc(6 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

figure .connected-device:nth-of-type(8) {
  --rotation-angle: calc(7 / var(--number-connectedDevices) * 360deg);
  transform: rotate(var(--rotation-angle));
}

<figure style="--number-connectedDevices: 8">
  <div class="central-device">
    <span class="device-label">中心设备</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备1</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备2</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备3</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备4</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备5</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备6</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备7</span>
  </div>
  <div class="connected-device">
    <span class="device-label">设备8</span>
  </div>
</figure>

额外说明

  • 可通过调整clip-path的坐标值，修改云形状的圆润度和大小
  • 若需要更精细的云形状，也可用SVG背景或多个伪元素叠加实现
  • 文本样式可根据需求调整字体、颜色等属性

内容的提问来源于stack exchange，提问作者Kartik Tanwar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.12 02:07:32