设置css边框以90度而不是45度角结束

Question

对于border-bottom和border-right属性,我有一个不同颜色的div.因此,它们通过一条线分开,使盒子呈45度角.

如何使底部边框更短,以便右边框一直到元素的底部,这将产生90度角分隔线？

Answer 1

你可以这样做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>

Answer 2

我使用了解决了这个问题border-width.您只需缩小不希望看到的边缘的边框宽度.

如果我们不希望边缘位于上边缘,我们可以将其置于border-width0.

border-width: 0px 5px 5px 5px;
border-color:#ddd #000 #000 #000;

Answer 3

可悲的事实是:边境角落被贬低.总是.(仅在使用不同颜色时才可见.)

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

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

Answer 4

对于顶部边框和底部边框,您可以使用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>