如何使用边框 css 将 div 分成 2 个部分

Question

所以我有一个 div，我已经用这个分割了它的颜色：

.menu-slide-outer  {
background: linear-gradient(180deg, #FFFFFF 23%, transparent 10%);
}

所以现在我需要用边框将 div 的一半或恰好 23% 分开，我该怎么做？ 这是我想要的画（边框只需要在顶部、右侧、左侧并分开分区）

我不能直接编辑网站的 html，所以我只能使用 CSS

Answer 1

在渐变中使用更多的值。用阴影制作边框。

.menu-slide-outer {
  height: 200px; width: 200px;
  
  background: linear-gradient(180deg, #ff002b calc(23% - 1px), #000 calc(23% - 1px) calc(23% + 1px), #fff200 calc(23% + 1px));
  box-shadow: inset 2px 2px 0 #000, inset -2px 0 0 #000;
}

<div class="menu-slide-outer"></div>