如何将具有相对父级的三角形放置到底部边框

<div class="container">
  <!-- 三角形将放置在这里 -->
</div>

.container {
  position: relative;
  border-bottom: 1px solid #000; /* 底部边框样式 */
  height: 100px; /* 容器高度，根据需求调整 */
}

.container::before {
  content: "";
  position: absolute;
  bottom: -10px; /* 调整三角形位置 */
  left: 50%; /* 三角形水平居中 */
  transform: translateX(-50%); /* 三角形水平居中 */
  border-left: 10px solid transparent; /* 左侧透明边框 */
  border-right: 10px solid transparent; /* 右侧透明边框 */
  border-top: 10px solid #000; /* 顶部边框样式 */
}