Html 将 css 边框设置为 90 度而不是 45 度角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7261703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set css border to end in a 90 instead of a 45 degree angle
提问by trajectory
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.
我有一个边框底部和边框右侧属性具有不同颜色的 div。因此，它们通过一条以 45 度角离开盒子的线分开。
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?
如何使底部边框更短，以便右边框一直延伸到元素的底部，从而产生 90 度角分隔线？
采纳答案by stslavik
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:
为了模拟对接，您可以堆叠两个 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>
Stack more or control the top and bottom differently for better control over the appearance of the joint.
堆叠更多或以不同方式控制顶部和底部，以更好地控制关节的外观。
回答by ThinkingStiff
You can do this with box-shadow.
您可以使用box-shadow.
Demo:
演示：
Output:
输出：
CSS:
CSS：
#borders {
border-bottom: 20px solid black;
box-shadow: 20px 0 0 0 red;
height: 150px;
margin: 30px;
width: 150px;
}
HTML:
HTML：
<div id="borders"></div>
回答by Gustav
I solved this issue using border-width. You simply reduce the width of the border at the edges you don't want to see.
我使用border-width. 您只需减少不想看到的边缘的边框宽度。
If we don't want the border on the upper edge, we can put border-widthto 0.
如果我们不想要上边缘的边框，我们可以设置border-width为 0。
border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;
回答by Madalina Taina
For the top border and the bottom border, you can use box-shadow:
对于顶部边框和底部边框，您可以使用box-shadow：
.box {
border: 10px solid #ddd;
border-top: 0;
border-bottom: 0;
box-shadow: 0 10px 0 #D03FBE, 0px -10px 0 #D03FBE;
float: left;
width: 100px;
height: 100px;
}<div class="box"></div>回答by Rich Bradshaw
You can't.
你不能。
For 90? angles you could just use colored divs.
90后？您可以只使用彩色 div 的角度。
You could get a similar effect for arbitrary angles by using skew transitions and absolute positioning, but it will be hard (if not impossible) to get it to look the same in older browsers (IE8 and lower will particular be a problem).
通过使用倾斜过渡和绝对定位，您可以为任意角度获得类似的效果，但是很难（如果不是不可能的话）让它在旧浏览器中看起来相同（IE8 及更低版本会特别成问题）。
回答by 2grit
I'm not sure if it is possible. But you can have a rounded corner:
我不确定这是否可能。但是你可以有一个圆角：
/*For Chrome-Safari*/
-webkit-border-radius:0px 0px 16px 0px;
/*For Firefox*/
-moz-border-radius:0px 0px 16px 0px;
May it give you a similar effect.
愿它给你一个类似的效果。
