设置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-width设为0。

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>

Answer 5

你不能。

对于90˚角度，您可以使用彩色div。

你可以通过使用偏斜过渡和绝对定位来获得任意角度的类似效果，但是在旧版浏览器中看起来相同（如果不是不可能的话）会很困难（IE8和更低版本会特别成问题）

Answer 6

我不确定是否有可能。 但你可以有一个圆角：

/*For Chrome-Safari*/
-webkit-border-radius:0px 0px 16px 0px;
/*For Firefox*/
-moz-border-radius:0px 0px 16px 0px;

它可以给你一个类似的效果。

Answer 7

您看到的是，不同边的边界会在拐角处对角分开：

.border {
  border: 10px solid;
  border-top-color: forestgreen;
  border-right-color: gold;
  border-bottom-color: steelblue;
  border-left-color: firebrick;
  width: 40px;
  height: 40px;
}

<div class="border"></div>

这是许多用于创建 CSS triangles

的行为

为了克服这个问题，我可以找到 2 个解决方案：包装元素上的边框或线性渐变：

选项 1：包装元素

.wrapper {
  border-bottom: 10px solid steelblue;
  height: 40px;
  width: 50px;
}

.border {
  border-right:10px solid gold;
  height: 40px;
  width: 40px;
}

<div class="wrapper">
  <div class="border"></div>
</div>

注意包装元素的高度比子元素高 5px。这对于对齐边框至关重要。

选项 2：线性梯度

.border {
  border-bottom: 10px solid;
  border-right: 10px solid;
  border-image: linear-gradient(to top, steelblue, steelblue 10px, gold 5px, gold) 10;
  height: 40px;
  width: 40px;
}

<div class="border"></div>

Answer 8

如果您正在寻找边框上的方形末端，您可以将两个边框设置为 0px，然后像这样运行一个虚拟动画：

@keyframes widthSet {
    to{
        border-right-width: 10px; //or top and bottom, your choice
        border-left-width: 10px;
    }
}

带有“animation-fill-mode: forwards;”