当前位置：首页 > CSS

css制作地图

2026-04-01 07:45:00CSS

使用CSS制作地图的基本方法

通过CSS可以创建简单的地图效果，通常结合HTML和SVG或纯CSS绘制。以下是几种常见的方法：

使用CSS和HTML创建简单地图

利用HTML的div元素和CSS样式可以绘制基础地图轮廓：

css制作地图

<div class="map">
  <div class="country" id="country1"></div>
  <div class="country" id="country2"></div>
</div>

.map {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: #e0f7fa;
}

.country {
  position: absolute;
  background-color: #4fc3f7;
  border: 2px solid #0288d1;
}

#country1 {
  width: 100px;
  height: 80px;
  top: 50px;
  left: 100px;
  border-radius: 10px;
}

#country2 {
  width: 120px;
  height: 60px;
  top: 120px;
  left: 250px;
  clip-path: polygon(0 0, 100% 20%, 80% 100%, 10% 80%);
}

通过position: absolute定位地图区域。
使用clip-path创建不规则形状。

结合SVG和CSS绘制地图

SVG更适合绘制复杂地图，CSS用于样式控制：

css制作地图

<svg width="400" height="300" viewBox="0 0 400 300">
  <path class="country" d="M100,50 L200,50 L150,150 Z"/>
  <path class="country" d="M250,100 L350,100 L300,200 Z"/>
</svg>

.country {
  fill: #81d4fa;
  stroke: #0288d1;
  stroke-width: 2;
  transition: fill 0.3s;
}

.country:hover {
  fill: #4fc3f7;
}

SVG的path元素定义地图路径。
CSS控制颜色、边框和交互效果。

使用CSS Grid布局地图

对于区块化的地图（如棋盘或网格布局），CSS Grid是理想选择：

<div class="grid-map">
  <div class="cell"></div>
  <div class="cell"></div>
  <!-- 更多单元格 -->
</div>

.grid-map {
  display: grid;
  grid-template-columns: repeat(5, 60px);
  grid-template-rows: repeat(5, 60px);
  gap: 2px;
}

.cell {
  background-color: #b3e5fc;
  border: 1px solid #0288d1;
}

.cell:nth-child(odd) {
  background-color: #4fc3f7;
}

Grid布局快速创建规整的地图结构。
通过:nth-child实现交替颜色。

实现交互效果

为地图添加悬停或点击交互：

.country {
  cursor: pointer;
}

.country:active {
  transform: scale(0.98);
}

.tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
}

.country:hover + .tooltip {
  display: block;
}

使用:hover和:active增强交互。
结合伪类或JavaScript实现动态效果。