CSS实现：双色分割容器中的三角形指示器

嘿，我完全懂你想要做的这个效果——一个左右分色、中间带斜向三角指示器的div！结合你提到的思路，我整理了几个实用的实现方案，咱们直接上干货：

核心思路拆解 #

• 双色布局：可以用Flex等分容器或者线性渐变背景两种方式，前者更适合左右需要独立添加内容的场景，后者更简洁
• 斜向三角指示器：利用CSS的border特性（就是你提到的对话气泡思路），或者通过伪元素旋转+背景色来实现，灵活度拉满

方案1：Flex布局+伪元素三角（推荐，内容更灵活） #

这种方式左右区域是独立的容器，方便各自添加文本、图片等内容：

HTML结构 #

<div class="split-box">
  <div class="box-left">
    <h3>左侧区域</h3>
    <p>这里可以放任意内容哦</p>
  </div>
  <div class="box-right">
    <h3>右侧区域</h3>
    <p>右侧内容也能自由编辑</p>
  </div>
</div>

CSS样式 #

.split-box {
  width: 90%;
  max-width: 800px;
  margin: 30px auto;
  display: flex;
  position: relative;
  /* 可选：给容器加个圆角和阴影更美观 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* 左侧双色区域 */
.box-left {
  width: 50%;
  padding: 30px;
  background-color: #2563eb;
  color: #fff;
}

/* 右侧双色区域 */
.box-right {
  width: 50%;
  padding: 30px;
  background-color: #f97316;
  color: #fff;
}

/* 斜向三角指示器（从左指向右） */
.split-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* 调整箭头位置和方向 */
  transform: translate(-100%, -50%);
  width: 0;
  height: 0;
  /* 用border实现箭头形状 */
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 18px solid #2563eb;
}

方案2：线性渐变背景+伪元素三角（简洁版） #

如果不需要左右独立容器，只是单纯的双色背景加指示器，用线性渐变更省事：

HTML结构 #

<div class="simple-split">
  <p>这是一个简洁的双色容器，中间带斜向指示器</p>
</div>

CSS样式 #

.simple-split {
  width: 90%;
  max-width: 800px;
  margin: 30px auto;
  padding: 40px 20px;
  /* 直接用渐变实现50%双色背景 */
  background: linear-gradient(to right, #2563eb 50%, #f97316 50%);
  position: relative;
  color: #fff;
  text-align: center;
  border-radius: 8px;
}

/* 斜向三角指示器 */
.simple-split::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 15px solid #2563eb;
}

自定义调整技巧 #

• 想要改变三角的大小：调整border的像素值就行
• 想要改变三角的颜色：修改border-left的颜色（和对应侧背景色一致更协调）
• 想要调整三角的垂直位置：修改top属性或者transform里的translateY值

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