当前位置：首页 > CSS

用css制作字母

2026-03-12 12:55:45CSS

使用CSS制作字母

使用CSS可以创建自定义字母形状，主要通过::before和::after伪元素结合border、transform等属性实现。以下是几种常见字母的CSS实现方法：

字母"A"

.letter-a {
  position: relative;
  width: 60px;
  height: 80px;
}
.letter-a::before {
  content: "";
  position: absolute;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid #ff6b6b;
}
.letter-a::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #ff6b6b;
  top: 30px;
  left: 20px;
}

字母"B"

.letter-b {
  position: relative;
  width: 60px;
  height: 80px;
  background: #4ecdc4;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.letter-b::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 80px;
  background: white;
  left: 15px;
}

字母"C"

.letter-c {
  width: 60px;
  height: 80px;
  border: 10px solid #ffbe76;
  border-radius: 50%;
  border-right-color: transparent;
}

字母"D"

.letter-d {
  position: relative;
  width: 60px;
  height: 80px;
  background: #a5d8ff;
  border-radius: 0 50% 50% 0;
}
.letter-d::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 80px;
  background: white;
  left: 10px;
}

字母"E"

.letter-e {
  position: relative;
  width: 60px;
  height: 80px;
  background: #da77f2;
}
.letter-e::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 10px;
  background: white;
  top: 15px;
  left: 10px;
}
.letter-e::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 10px;
  background: white;
  top: 35px;
  left: 10px;
}

使用SVG替代方案

对于更复杂的字母形状，推荐使用SVG：

用css制作字母

<svg viewBox="0 0 100 100" width="100" height="100">
  <path d="M20,20 L80,20 L60,80 L40,80 Z" fill="#ff6b6b"/>
</svg>

使用clip-path创建字母

.letter-s {
  width: 60px;
  height: 80px;
  background: #69db7c;
  clip-path: polygon(
    0% 20%, 60% 20%, 60% 0%, 100% 50%, 
    60% 100%, 60% 80%, 0% 80%
  );
}