将 css 边框设置为 90 而不是 45 度角

Question

我有一个 border-bottom 和 border-right 属性具有不同颜色的 div。所以它们通过一条线分开，使盒子成 45 度角。

我怎样才能使底部边框更短，以便右边框一直延伸到元素的底部，从而产生 90 度角分隔线？

原文由 trajectory 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可悲的事实：边角是斜接的。总是。 （只有使用不同的颜色才可见。）

为了模拟对接，可以叠加两个div得到模拟结果：

 div {
  position: absolute;
  left: 0;
  top: 0;
  height: 100px;
  width: 100px;
}

 <div style="border-left: 2px solid #ff0000; border-bottom: 2px solid #ff0000;">
</div>
<div style="border-right: 2px solid #00ff00; border-top: 2px solid #00ff00;">
</div>

堆叠更多或以不同方式控制顶部和底部，以更好地控制接头的外观。

原文由 stslavik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 box-shadow 执行此操作。

演示：

输出：

CSS：

 #borders {
    border-bottom: 20px solid black;
    box-shadow: 20px 0 0 0 red;
    height: 150px;
    margin: 30px;
    width: 150px;
}

HTML:

 <div id="borders"></div>

原文由 ThinkingStiff 发布，翻译遵循 CC BY-SA 3.0 许可协议