如何在 css 中将顶部栏移到左侧？

Question

我有一个显示顶部红色条的 div。 我一直在尝试将此栏移到左侧并使其看起来像左侧边框，但没有任何运气。 有谁知道如何使用这段代码让它看起来像一个边框？ 提前致谢！

 .container { position: relative; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border: solid 2px #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; height: 6px; width: 100%; top: 0; left: 0; background-color: red; }

 <div class = "container">this is a text</div>

Answer 1

本例调整了::after的position，使红色边框出现在左边，希望能接近想要的结果。

 .container { position: relative; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border: solid 2px #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; width: 6px; inset: 0; background-color: red; }

 <div class = "container">this is a text</div>

Answer 2

你可以设置border-left: 6px solid red; 在容器 class 上并删除background-color: red; 来自.container::after

此外，如果您想保留灰色边框，只需将该样式应用到容器的每一侧，如下所示：

  border-top: 2px solid #e1e4e8;
  border-bottom: 2px solid #e1e4e8;
  border-right: 2px solid #e1e4e8;

请看下面的片段：

 .container { position: absolute; display: block; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border-left: 6px solid red; border-top: 2px solid #e1e4e8; border-bottom: 2px solid #e1e4e8; border-right: 2px solid #e1e4e8; overflow: hidden; }.container::after { content: ''; position: absolute; display: block; height: 6px; width: 100%; top: 0; left: 0; }

 <div class = "container">this is a text</div>

Answer 3

也许只是将其简化为边框？

 .container { position: relative; width: 100%; padding: 18px; margin-bottom: 16px; border-radius: 8px; border: solid 2px #e1e4e8; border-left: solid 8px red; overflow: hidden; }

 <div class = "container">this is a text</div>

Answer 4

您还可以使用混合边框样式，并在顶部、底部和右侧使用隐藏。 W3Schools描述了用法