CSS几何图像无法正常工作

Question

我有一些问题要在我的页面上制作此图片：

.l-bs {
  position: relative;
  left: 0;
  right: 0;
  width: 60px;
  height: 60px;
  margin: 10px;
}
.l-tr {
  position: absolute;
  width: 30px;
  height: 0;
  border-bottom: 25px solid black;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  z-index: 2;
}

<div class="l-bs">
  <div class="l-tr">
  </div>
</div>

我使用完全相同的代码但不是梯形，它在我的页面中显示一个三角形

要制作相同的图像，我必须加倍 .l-tr 宽度。

有谁知道发生了什么事？

打印：https://i.gyazo.com/1da9b63fdeea30604036bbff3707f3b3.png