css 中的尖左边框

Question

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

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

Answer 1

在下面的例子中，我使用 :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>

Answer 2

使用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>

css 中的尖左边框

Spiky left border in css

css

border