如何让div的border-right高度仅为自身高度的75%？

嘿，我来给你几个靠谱的实现方案，帮你把div的border-right高度调整为自身高度的75%～

这个方法不用修改现有HTML结构，靠CSS伪元素就能搞定，非常干净。核心思路是给目标div添加一个伪元素，把它定位到容器右侧，设置高度为75%并垂直居中，模拟边框效果。

代码示例：

/* 假设你的目标div类名为target-div */
.target-div {
  position: relative; /* 让伪元素相对于当前容器定位 */
  /* 保留你原有的其他样式，比如宽度、内边距等 */
}

.target-div::after {
  content: ''; /* 伪元素必须设置content才会显示 */
  position: absolute;
  top: 50%; /* 先定位到容器垂直中点 */
  transform: translateY(-50%); /* 向上偏移自身高度的一半，实现完美居中 */
  right: 0; /* 贴紧容器右侧 */
  width: 1px; /* 边框宽度，根据你的需求调整 */
  height: 75%; /* 你要的75%容器高度 */
  background-color: #ccc; /* 边框颜色，替换成你实际需要的颜色 */
}

这个方案的优势是不增加DOM节点，伪元素不会影响原有布局，调整高度和位置都很灵活。

如果你更倾向于用原生的border属性，嵌套子容器是个稳妥的选择。步骤很简单：把原div的内容放到一个子容器里，给子容器设置border-right，再通过布局让子容器高度为父容器的75%并垂直居中。

代码示例：
HTML部分：

<div class="col-sm-6 col-md-6 col-lg-6 parent-container">
  <div class="content-wrapper">
    <!-- 这里放你原来的所有内容 -->
  </div>
</div>

CSS部分：

.parent-container {
  display: flex; /* 用flex布局实现子元素垂直居中 */
  align-items: center; /* 垂直居中对齐 */
  height: 100%; /* 确保父容器有明确高度，根据你的实际布局调整，比如如果是自适应高度可以去掉 */
  /* 父容器的其他原有样式 */
}

.content-wrapper {
  height: 75%; /* 子容器高度为父容器的75% */
  border-right: 1px solid #ccc; /* 你的边框样式，宽度、颜色按需调整 */
  width: 100%; /* 子容器宽度占满父容器 */
  padding: 0 15px; /* 可选，根据内容调整内边距，避免内容贴边框 */
}

用flex布局可以轻松实现子容器的垂直居中，这样边框的高度就是子容器的高度，刚好是父容器的75%，完全符合你的需求。

这个方法靠背景渐变来画边框，同样不用修改HTML结构。核心是通过渐变的透明区域和实色区域，模拟出75%高度的右侧边框。

代码示例：

.target-div {
  background-image: linear-gradient(to bottom, transparent 12.5%, #ccc 12.5%, #ccc 87.5%, transparent 87.5%);
  background-repeat: no-repeat;
  background-position: right center; /* 渐变背景定位到右侧垂直居中 */
  background-size: 1px 100%; /* 1px是边框宽度，100%是背景的整体高度 */
  /* 你的其他原有样式 */
}

这里的transparent部分各占12.5%（因为(100%-75%)/2=12.5%），中间的实色区域就是75%的高度，视觉上和边框完全一致。适合不想用伪元素的场景。

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