双边框右CSS

Question

美好的一天，我发现很难构建一个双右边框，第一行从底部开始高度为 50%。

这是一张图片来显示我的结果应该是

我的代码：

.border-double-half-right {
  border-right: 5px double rgb(125, 185, 153);
  border-image: linear-gradient(to right, rgba(108, 219, 141, 0) 25%, rgba(108, 219, 141, 1) 25%, rgba(108, 219, 141, 1) 75%, rgba(108, 219, 141, 0) 75%);
  border-image-slice: 1;
}

Answer 1

使用边框和背景

.box {
  --b: 5px; /* thickness */
  --c: red;
  
  height: 100px;
  border-right: var(--b) solid var(--c);
  background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}

<div class="box"></div>