CSS边框角覆盖

Question

例如，当您对左侧和底部使用不同的大小时，有一种解决CSS边框的方法吗？像这样：

我知道那是倾斜的，但是有一种方法可以在它上使用某种剪裁或遮罩甚至z索引？

我的CSS：

.activity-container{
  border-bottom: 1px solid @color-border-light;
  border-left: 5px solid @color-green;
  position: relative;
}

谢谢

Answer 1

z-index属性不适用于border值，并且所有border边都延伸到它们所应用的元素中。我建议outline如果想要一个延伸到元素外部的边框，但是outline不能应用于各个侧面，因此它必须在元素周围保持一致。

所有这些，您可以使用box-shadow充当元素左侧的伪边框，因为它可以以扩展到元素外部或内部的方式应用（默认为外部） ：

.bordered {
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  border: 1px solid red;
  border-left: none;
  box-shadow: -5px 0px 0px 0px green;
}

<div class="bordered"></div>

我正在做的是隐藏border的左侧，并将其替换为延伸到元素左侧之外的box-shadow。由于border向内延伸而box-shadow向外延伸，因此它们会合而不是重叠。