css - css 中的尖尖左边框

Question

假设我在 display: block 中有一个元素，其属性为 left-margin: solid 3px black。

如何使边框在左上角三个像素和左下角一个像素？这是我的意思的图表。

Answer 1

使用边框图像:

b {
  display: block;
  width: 200px;
  height: 100px;
  background: #ccc;
  border-left: solid 3px;
  border-image: linear-gradient(to bottom right, #000 50%, #fff 63%) 0 0 0 100% / 0 0 0 3px
}

<b></b>