如何使用CSS的clip-path属性创建可添加文字的锥形图形？

AI 小北

2026-8-19

实现可添加文字的扇形/锥形图形方案

下面提供两种实用方案，帮你实现带内部文字的扇形/锥形效果：

方法一：使用`clip-path`自定义扇形轮廓

这种方式适合任意角度的扇形，灵活性更高：

代码示例

<div class="sector-box">
  <div class="sector-content">
    这里可以添加多行文字，自定义内容和样式
  </div>
</div>

.sector-box {
  width: 250px;
  height: 250px;
  background-color: #f39c12;
  /* 自定义扇形路径：右上120度扇形，可调整坐标点改变角度/方向 */
  clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
  position: relative;
  overflow: hidden;
}

.sector-content {
  position: absolute;
  /* 根据扇形形状调整位置，确保文字在可见区域 */
  top: 30px;
  right: 20px;
  width: 75%;
  padding: 15px;
  color: #fff;
  line-height: 1.6;
}

说明

修改clip-path: polygon()里的坐标点，就能调整扇形的角度和朝向（比如想要左下扇形，可改为polygon(0% 100%, 0% 0%, 100% 100%)）
内部文本容器通过绝对定位+宽高限制，适配扇形区域，避免文字超出可见范围

方法二：用边框模拟规则扇形（适合90°倍数的锥形）

如果需要的是90°、180°这类规则扇形，用边框模拟更简单：

代码示例

<div class="cone-box">
  <p>锥形内部的文字内容</p>
</div>

.cone-box {
  width: 0;
  height: 0;
  border-radius: 100%;
  /* 通过边框组合模拟右上90°扇形 */
  border-top: 220px solid #3498db;
  border-right: 220px solid #3498db;
  border-bottom: 220px solid transparent;
  border-left: 220px solid transparent;
  position: relative;
}

.cone-box p {
  position: absolute;
  top: -200px;
  right: 30px;
  width: 160px;
  color: #fff;
  font-size: 14px;
}