如何使用CSS创建文本分割效果？

文本分割效果是指通过CSS让文字呈现出被分割、截断、分层等视觉表现，常用于首页横幅、产品宣传页的标题设计，能有效提升页面的设计感。下面介绍几种常用的实现方案，你可以根据需求选择使用。

方案一：使用clip-path裁剪实现分割

clip-path属性可以裁剪元素的可见区域，通过给文本元素设置不同的裁剪路径，就能实现文字被分割的效果。比如我们可以让文字左右两部分分别显示不同的裁剪区域。

/* 基础文本样式 */
.split-text {
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
    position: relative;
}
/* 左半部分文本 */
.split-text .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    color: #2c3e50;
    /* 裁剪右半部分，只显示左半区域 */
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
/* 右半部分文本 */
.split-text .right {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    color: #e74c3c;
    /* 裁剪左半部分，只显示右半区域 */
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

对应的HTML结构如下：

<div class="split-text">
    <span class="left">分割文本</span>
    <span class="right">分割文本</span>
</div>

方案二：使用background-clip实现背景分割

background-clip属性可以定义背景的绘制区域，结合渐变背景可以实现文字被背景分割的效果，这种方式不需要重复写两份文本，实现更简洁。

.bg-split-text {
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
    /* 设置渐变背景，左右各占50% */
    background: linear-gradient(to right, #2c3e50 50%, #e74c3c 50%);
    /* 背景只绘制在文字区域 */
    -webkit-background-clip: text;
    background-clip: text;
    /* 文字颜色透明，显示背景 */
    color: transparent;
}

HTML结构只需要一个元素：

<div class="bg-split-text">分割文本</div>

方案三：使用mix-blend-mode实现混合分割

mix-blend-mode可以设置元素内容与背景的混合模式，通过叠加不同颜色的文本层，配合混合模式可以实现更复杂的分割视觉效果。

.blend-split {
    position: relative;
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    margin: 40px 0;
    height: 100px;
}
.blend-split .base {
    color: #2c3e50;
    position: relative;
    z-index: 1;
}
.blend-split .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #e74c3c;
    /* 只显示右半部分 */
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    /* 混合模式让叠加部分产生特殊效果 */
    mix-blend-mode: multiply;
}

对应的HTML结构：

<div class="blend-split">
    <div class="base">分割文本</div>
    <div class="overlay">分割文本</div>
</div>

不同方案的选择建议

如果只需要简单的左右颜色分割，优先选择background-clip方案，代码量最少且兼容性较好。如果需要更复杂的裁剪形状，比如斜向分割、不规则图形分割，可以使用clip-path方案。如果想要实现颜色叠加后的特殊混合效果，再考虑使用mix-blend-mode方案。

CSS文本分割效果clip_pathbackground_clipmix_blend_mode修改时间：2026-06-09 11:57:24