如何用CSS实现身份证头部两个Div的指定色彩分隔样式？

第一种：红蓝对角渐变样式 #

对应红底+蓝色从左下角延伸至右上角的分界效果，通过线性渐变背景结合原有文字样式实现：

.id-header-red-blue {
  font-size: 23px !important;
  color: #fff !important;
  text-shadow: 2px 0 red !important;
  font-weight: 900 !important;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  /* 核心渐变：从左下角到右上角的红蓝清晰分界 */
  background: linear-gradient(to top right, red 0%, red 50%, blue 50%, blue 100%);
  padding: 8px 12px; /* 保证内容不贴边 */
}

渐变参数说明：to top right指定渐变方向，通过50%的位置精准分割红蓝区域，实现对角分界效果。

第二种：白红带垂直色块样式 #

对应红底+左侧垂直白色条的效果，通过多层背景实现：

.id-header-white-red {
  font-size: 23px !important;
  color: #fff !important;
  text-shadow: 2px 0 red !important;
  font-weight: 900 !important;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  /* 核心多层背景：左侧白色垂直条 + 红色底 */
  background: 
    linear-gradient(90deg, white 0%, white 10%, transparent 10%),
    red;
  padding: 8px 12px;
  padding-left: 20px; /* 调整文字与白色条的间距 */
}

多层背景说明：第一层为占宽度10%的白色垂直条，第二层为红色背景，可通过修改百分比调整白色条的宽度。

使用示例 #

在HTML中给对应div添加类名即可应用样式：

<!-- 应用红蓝渐变样式 -->
<div class="id-header-red-blue">身份证标题</div>
<!-- 应用白红垂直条样式 -->
<div class="id-header-white-red">身份证标题</div>

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