如何垂直居中css三角形

Question

我想知道如何在红线上垂直居中以下三角形：

.triangle {
  position: relative;
  height: 1px;
  width: 200px;
  background: red;
  margin-top: 20px;
}

.triangle:before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);

  width: 11px;
  height: 11px;

  background: transparent;
  border: 1px solid #000;
  border-left-color: transparent;
  border-bottom-color: transparent;
  
  content: '';
}

<div class="triangle"></div>

问题是，元素是居中的，但是由于元素的一半是“不可见的”，它看起来不像那样......

谢谢！

Answer 1

我可以通过改变这一行来做到这一点：

transform: translate(-50%, -50%) rotate(-45deg);

到此：

transform: translate(-50%, -20%) rotate(-45deg);

Answer 2

另一种方法是更改​​top的值，您当前将其设置为0.您可以将其更改为top：4;