css制作goole

CSS制作Google图标

使用CSS可以创建Google图标的简化版本，主要涉及颜色块和基本形状的组合。以下是实现方法：

HTML结构

<div class="google-logo">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

CSS样式

.google-logo {
  position: relative;
  width: 150px;
  height: 150px;
}

.blue {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #4285F4;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.red {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #EA4335;
  border-radius: 50%;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: rotate(-30deg);
  transform-origin: top left;
}

.yellow {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #FBBC05;
  border-radius: 50%;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: rotate(30deg);
  transform-origin: bottom left;
  left: 50px;
}

.green {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #34A853;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transform: rotate(30deg);
  transform-origin: top right;
  left: 50px;
}

关键实现要点

颜色代码

• 蓝色: #4285F4
• 红色: #EA4335
• 黄色: #FBBC05
• 绿色: #34A853

形状处理 使用clip-path将圆形切割为半圆，通过transform旋转不同角度形成G字母的曲线效果。定位采用绝对定位叠加，通过调整transform-origin控制旋转中心点。

响应式调整 可以通过修改容器.google-logo的尺寸，内部元素会自动按比例缩放。建议保持宽高相同以获得正确比例。