HTML/CSS制作Google徽标：Codepen蓝色水平线错位修复方案

问题分析 #

原代码中，后两个.wrap容器作为body直接子元素，使用position:absolute时以body为定位基准，而body的flex布局在Codepen环境与本地浏览器存在细微差异，导致蓝色水平线（.horizontal-color）与其他徽标元素错位。

修复方案 #

1. 将后两个.wrap容器嵌套到第一个.wrap内，让所有徽标元素共享同一个相对定位的父容器，确保定位基准统一
2. 调整后两个.wrap的定位参数，使其与父容器完全重叠

修改后的完整代码 #

HTML #

<body>
  <div class="wrap">
    <div class="color3"></div>
    <div class="right-center-color"></div>
    <div class="horizontal-color"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
  </div>
</body>

CSS #

* {
  box-sizing: border-box !important;
}

body {
  margin: 0;
  padding: 0;
  background: #233637;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

html {
  font-size: 125%;
}

.wrap {
  width: 15rem;
  height: 15rem;
}

.wrap:first-child {
  position: relative;
}

.wrap:first-child .wrap:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border-top: 3rem solid transparent;
  border-right: 3rem solid transparent;
  border-bottom: 3rem solid #2ba14b;
  border-left: 3rem solid transparent;
  transform: rotate(20deg);
}

.wrap:first-child .wrap:nth-child(5) {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border-top: 3rem solid #e33e2b;
  border-right: 3rem solid transparent;
  border-bottom: 3rem solid transparent;
  border-left: 3rem solid transparent;
  transform: rotate(-20deg);
}

.color3 {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border-top: 3rem solid #e33e2b;
  border-right: 3rem solid transparent;
  border-left: 3rem solid #f1b500;
  border-bottom: 3rem solid #2ba14b;
}

.right-center-color {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: 3rem solid transparent;
  border-right: 3rem solid #3a7cec;
  transform: rotate(45deg);
  z-index: -1;
}

.horizontal-color {
  height: 3rem;
  width: 8rem;
  background-color: #3a7cec;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-bottom-right-radius: 1.5rem;
}

仅修改.horizontal-color的替代方案 #

若不想调整HTML结构，可直接修改.horizontal-color的定位规则，使其基于body精准对齐：

.horizontal-color {
  height: 3rem;
  width: 8rem;
  background-color: #3a7cec;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(7.5rem - 100%), -50%);
  border-bottom-right-radius: 1.5rem;
}

这里通过calc(7.5rem - 100%)基于徽标容器半宽（7.5rem）计算偏移量，确保水平线始终对齐容器右侧。

内容的提问来源于stack exchange，提问作者Beginner Web Developer