将CSS边框设置为以90度而不是45度角结束

Question

我有一个具有不同颜色的div，分别用于border-bottom和border-right属性。因此它们通过一条线分开，以45度角离开盒子。

如何使底边框更短，以使右边框一直到达元素的底部，从而产生90度角分隔线？

Answer 1

可悲的事实：边界角被斜切了。总是。（仅在使用不同颜色时可见。）

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

<style>
div {
  position:absolute;
  left:0;
  top:0;
  height:100px;
  width: 100px;
}
</style>

<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>

堆叠更多或不同地控制顶部和底部，以更好地控制关节的外观。