如何仅用CSS正确镜像并复刻VueJS标志？

问题描述 #

我尝试仅通过CSS复刻VueJS标志（不导入SVG等外部资源），已借助clippy工具设置了合适的clip-path，但始终无法确定标志臂之间的正确旋转角度。我尝试了多种平移、变换操作，原本以为应用60度旋转即可解决，但实际效果并不理想。

原尝试代码：

.wrapper {
  height: 100svh;
  display: flex;
  flex-direction: row;
  align-items: center;
  transform: rotate(-60deg)
}

.wrapper div {
  width: 250px;
  height: 45px;
}

.left {
  transform: rotate(-60deg) translate(60%, 200%) scale(-1);
}

.green {
  background-color: #42b883;
  clip-path: polygon(33px 0, calc(100% - 33px) 0, 100% 100%, 0% 100%);
}

.blue {
  background-color: #35495e;
  clip-path: polygon(
    66px 0,
    calc(100% - 66px) 0,
    calc(100% - 33px) 100%,
    33px 100%
  );
}

<div class="wrapper">
  <main class="left">
    <div class="blue"></div>
    <div class="green"></div>
  </main>
  <main class="right">
    <div class="blue"></div>
    <div class="green"></div>
  </main>
</div>

解决方案 #

核心问题是变换原点默认在元素中心导致旋转后坐标计算混乱，且Vue标志的三个臂是围绕中心呈120°间隔分布（不是60°）。以下是修正后的实现：

完整代码

:root {
  --arm-width: 250px;
  --arm-height: 45px;
  --clip-offset: 33px;
  --vue-green: #42b883;
  --vue-blue: #35495e;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vue-logo {
  position: relative;
  width: calc(var(--arm-width) * 1.5);
  height: calc(var(--arm-width) * 1.5);
}

.arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--arm-width);
  height: var(--arm-height);
  transform-origin: left center; /* 以臂的左侧中心为旋转原点 */
  display: flex;
  flex-direction: column;
  gap: 2px; /* 色块间微小间隙，贴近官方标志 */
}

/* 三个臂按120°间隔旋转，实现三角对称 */
.arm:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
.arm:nth-child(2) { transform: translate(-50%, -50%) rotate(120deg); }
.arm:nth-child(3) { transform: translate(-50%, -50%) rotate(240deg); }

.blue-block {
  background-color: var(--vue-blue);
  clip-path: polygon(
    calc(var(--clip-offset) * 2) 0,
    calc(100% - var(--clip-offset) * 2) 0,
    calc(100% - var(--clip-offset)) 100%,
    var(--clip-offset) 100%
  );
  height: 50%;
}

.green-block {
  background-color: var(--vue-green);
  clip-path: polygon(
    var(--clip-offset) 0,
    calc(100% - var(--clip-offset)) 0,
    100% 100%,
    0 100%
  );
  height: 50%;
}

<div class="vue-logo">
  <div class="arm">
    <div class="blue-block"></div>
    <div class="green-block"></div>
  </div>
  <div class="arm">
    <div class="blue-block"></div>
    <div class="green-block"></div>
  </div>
  <div class="arm">
    <div class="blue-block"></div>
    <div class="green-block"></div>
  </div>
</div>

关键优化点

• CSS变量统一控制：所有尺寸、偏移值用变量管理，后续调整更高效
• 旋转原点调整：将transform-origin设为臂的左侧中心，旋转后能精准对齐到标志中心
• 正确的旋转间隔：三个臂按0°、120°、240°旋转，完美匹配Vue标志的三角对称结构
• clip-path复用：用变量替代固定像素值，保持色块形状一致性
• 细节还原：添加色块间隙，更贴近官方标志的视觉效果

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