调整和定位边界属性

Question

我可以在css中调整border-left属性的大小和位置吗？或者＆＃34; hack＆＃34;？下面显示了我想要的内容。黑色矩形表示列和红色，即我希望在该列上具有的边框。可能的？

如果没有，我可以在里面添加另一个div，然后给div设置border属性吗？

Answer 1

您可以将:before伪元素与position: absolute

一起使用

＆＃13;

＆＃13;

.column {
  position: relative;
  height: 200px;
  width: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column:before {
  content: '';
  height: 50px;
  width: 3px;
  background: red;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="column">Column</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您也可以使用渐变和背景剪辑来完成此操作。

div {
  width: 100px;
  height: 300px;
  border-width: 2px;
  border-style: solid;
  border-color: black black black transparent;
  background-image: linear-gradient(white, white), linear-gradient(to bottom, black 30%, red 30%, red 60%, black 0);
  background-clip: padding-box, border-box;
}

<div></div>