设置css边框以90度而不是45度角结束 [英] set css border to end in a 90 instead of a 45 degree angle

问题描述

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

如何使底部边框变短，

解决方案

悲伤的事实：边框角落是斜接的。总是。

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

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

I have a div with different colors for both the border-bottom and border-right properties. So they are separated via a line leaving the box in a 45 degree angle.

How can I make the bottom-border shorter so that the right border goes all the way to the bottom of the element which would yield a 90 degree angle separator-line?

解决方案

Sad fact: Border corners are mitered. Always. (It's only visible if using different colors.)

In order to simulate a butt joint, you can stack two divs to get a simulated result:

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

Stack more or control the top and bottom differently for better control over the appearance of the joint.

这篇关于设置css边框以90度而不是45度角结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！