如何在CSS实现的幸运转盘彩色扇形元素上添加文字？

方法一：使用内部span元素（推荐） #

这种方式比伪元素更直观，方便修改文字内容，定位也更灵活。

HTML结构

<div class="wheel">
  <!-- 以8个扇形为例 -->
  <div class="slice slice-1"><span>一等奖</span></div>
  <div class="slice slice-2"><span>二等奖</span></div>
  <div class="slice slice-3"><span>三等奖</span></div>
  <div class="slice slice-4"><span>谢谢参与</span></div>
  <div class="slice slice-5"><span>50元优惠券</span></div>
  <div class="slice slice-6"><span>10元优惠券</span></div>
  <div class="slice slice-7"><span>20元优惠券</span></div>
  <div class="slice slice-8"><span>再来一次</span></div>
</div>

CSS核心样式

.wheel {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #333;
}

.slice {
  position: absolute;
  width: 50%;
  height: 50%;
  transform-origin: bottom right;
  /* 8个扇形，每个占45度，通过rotate和skewY实现扇形效果 */
}

/* 逐个设置扇形背景色和旋转角度 */
.slice-1 {
  background: #ff4444;
  transform: rotate(0deg) skewY(-45deg);
}
.slice-2 {
  background: #ffbb33;
  transform: rotate(45deg) skewY(-45deg);
}
.slice-3 {
  background: #00C851;
  transform: rotate(90deg) skewY(-45deg);
}
.slice-4 {
  background: #33b5e5;
  transform: rotate(135deg) skewY(-45deg);
}
.slice-5 {
  background: #aa66cc;
  transform: rotate(180deg) skewY(-45deg);
}
.slice-6 {
  background: #ff8800;
  transform: rotate(225deg) skewY(-45deg);
}
.slice-7 {
  background: #0099cc;
  transform: rotate(270deg) skewY(-45deg);
}
.slice-8 {
  background: #cc0000;
  transform: rotate(315deg) skewY(-45deg);
}

/* 文字定位核心 */
.slice span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  white-space: nowrap;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

/* 逐个调整文字的旋转和位移，让文字贴合扇形弧度 */
.slice-1 span {
  transform: rotate(22.5deg) translate(15px, -180px);
}
.slice-2 span {
  transform: rotate(67.5deg) translate(15px, -180px);
}
.slice-3 span {
  transform: rotate(112.5deg) translate(15px, -180px);
}
.slice-4 span {
  transform: rotate(157.5deg) translate(15px, -180px);
}
.slice-5 span {
  transform: rotate(202.5deg) translate(15px, -180px);
}
.slice-6 span {
  transform: rotate(247.5deg) translate(15px, -180px);
}
.slice-7 span {
  transform: rotate(292.5deg) translate(15px, -180px);
}
.slice-8 span {
  transform: rotate(337.5deg) translate(15px, -180px);
}

方法二：使用伪元素（::before/::after） #

如果偏好伪元素，只需把span的逻辑转移到伪元素上，注意设置content属性：

.slice-1::before {
  content: "一等奖";
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  transform: rotate(22.5deg) translate(15px, -180px);
  white-space: nowrap;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

/* 其他扇形同理，修改content和rotate角度 */

关键注意事项 #

• 扇形数量不同时，需重新计算每个扇形的rotate角度（360°/扇形数量），文字的旋转角度是扇形起始角度加上半角（比如45°扇形，文字转22.5°）
• translate的第二个值（纵向位移）要根据转盘半径调整，确保文字落在扇形的外侧边缘
• 长文字可以通过缩小字体、设置white-space: normal并限制宽度来适配

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