前端 - 如何优雅地用CSS实现一个罗盘指示器？

Question

如何优雅地用CSS实现一个罗盘指示器？

实现效果大体类似于图片中这样：

• 一个圆盘里面包含四个箭头，四个箭头的尾部位于圆盘的中心，头部分别指向东、西、 南、北四个方面。
• 当前物体所朝向方面的箭头颜色与其他箭头颜色不同。

扩展：

• 在箭头头部用文字（"N","S","E","W"）标识方向。
• 用js获取设备的方向，在罗盘上实时显示当前设备的方向。
• ....

我的实现思路:

• 首先实现一个箭头，一个箭头是由上下两个三角形组成的。

  • CSS制作一个三角形常用的方法就是借助border。
  • 使用css变量来设置箭头的大小、颜色，方便我们修改以制作不同大小、比例、颜色的箭头。

<div class="arrow">  <div class="arrow-top"></div>  <div class="arrow-bottom"></div></div>

.arrow {  --width: 50px;  --height: 200px;  --color: blue;   width: var(--width);  height: var(--height);}.arrow-top {  width: 0;  border-width: 0 calc(var(--width) / 2) var(--width) calc(var(--width) / 2);  border-color: transparent;  border-bottom-color: var(--color);  border-style: solid;}.arrow-bottom {  margin-left: calc(var(--width) / 4);  width: 0;  --bottom-width: calc(var(--width) / 2);  --bottom-height: calc(var(--height) - var(--width));  border-width: var(--bottom-height) calc(var(--bottom-width) / 2) 0 calc(var(--bottom-width) / 2);  border-color: transparent;  border-top-color: var(--color);  border-style: solid;}

• 使用transform实现不同方向的箭头

.arrow.top {}.arrow.right {  transform: rotate(90deg);}.arrow.left {  transform: rotate(-90deg);}.arrow.bottom {  transform: rotate(180deg);}

• 通过添加类名light给其中一个箭头设置不同的颜色

  .arrow.light {--color: yellow;}

• 最后用一个容器包含四个箭头，采用绝对定位+transform将箭头定位到指定的位置。

  • 定位到指定位置的具体方法：

    • 先定位到上方箭头的位置

      .arrow {...top: 0;left: 50%;transform: translate(-50%, 0);}

    • 然后再旋转就定位到达其他指定的位置。

      • 需要注意的几点是

        • 为了让箭头的尾部位于圆盘的中心，需要调整变换原点transform-origin: 50% 100%。

        • 在好几个规则(.arrow, .arrow.left..)中都出现了transform变换，但是当施加到同一个元素上时只有一个transform..声明有效，所以将.arrow中出现的transform变换整合到arrow.left..中。

          .arrow.top {transform: translate(-50%, 0);}.arrow.right {transform: translate(-50%, 0) rotate(90deg);}.arrow.left {transform: translate(-50%, 0) rotate(-90deg);}.arrow.bottom {transform: translate(-50%, 0) rotate(180deg);}

  • relative容器的大小怎么确定？也是借助于css变量。箭头的大小在这个容器中确定了，然后箭头继承了这个大小。容器的大小就是calc(max((--arrow-height), var(--arrow-weight)) * 2)。

    .arrow {--width: var(--arrow-width, 50px);--height: var(--arrow-height, 200px);--color: var(--arrow-color, blue);......compass-indicator {--arrow-width: 50px;--arrow-height: 100px;--arrow-color: blue;--arrow-light-color: yellow;--size: calc(max(var(--arrow-height), var(--arrow-width)) * 2);  position: relative;width: var(--size);height: var(--size);background: red;border-radius: 50%;border: 4px dashed orange;}

在做项目的时候，需要一个这样的罗盘指示器，觉得可以作为一个比较好的CSS挑战题。
欢迎给出其他好的实现思路。

附:

• codepen

Answer 1

https://jsrun.net/uR5Kp/edit

<div class="compass-indicator">  <div class="arrow" style="--rotate:0deg;"></div>  <div class="arrow" style="--rotate:90deg;"></div>  <div class="arrow" style="--rotate:180deg;"></div>  <div class="arrow light" style="--rotate:270deg;"></div>  </div>.arrow {  --width: var(--arrow-width, 50px);  --height: var(--arrow-height, 200px);  --color: var(--arrow-color, blue);  width: var(--width);  height: var(--height);  transform-origin: 50% 100%;  background-color: var(--color);  position: absolute;  top: 0;  left: 50%;  clip-path: polygon(50% 0, 100% 50%, 70% 50%, 50% 100%, 30% 50%, 0 50%);  transform: translate(-50%, 0) rotate(var(--rotate));}.arrow.light {  --color: var(--arrow-light-color, blue);}.compass-indicator {  --arrow-width: 50px;  --arrow-height: 100px;  --arrow-color: blue;  --arrow-light-color: yellow;  --size: calc(max(var(--arrow-height), var(--arrow-width)) * 2);  position: relative;  width: var(--size);  height: var(--size);  background: red;  border-radius: 50%;  border: 4px dashed orange;}