Колючая левая граница в css

Question

Предположим, у меня есть элемент в display: block со свойством left-margin: solid 3px black.

Как сделать границу в три пикселя слева вверху и один пиксель внизу слева? Вот диаграмма того, что я имею в виду.

Answer 1

Использование border-image:

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>

Answer 2

В приведенном ниже примере я использовал :after, чтобы добавить эффект границы, добавив skew

.parent {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden;
  margin: 20px;
}

.parent.left-border {
  border: 0;
  border-left: 1px solid black;
}

.parent:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  background: black;
  -webkit-transform: skewX(-2deg);
  transform: skewX(-2deg);
  bottom: 0;
  transform-origin: top;
}

<div class="parent"></div>

<div class="parent left-border"></div>