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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

为了模拟对接，可以堆叠两个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>

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

以上是 将CSS边框设置为以90度而不是45度角结束 的全部内容， 来源链接： utcz.com/qa/419446.html

回到顶部