三角形指针/边框在水平线上

Question

我试图在水平线上创建三角形指针/边框.

这是我想要实现的一个例子:

我尝试操纵div的顶部边框,但到目前为止我所做的一切都根本不起作用.

Answer 1

有几种方法可以实现这一点,它可能取决于您的布局.一种解决方案是使用在两侧具有边界的旋转元件.

.triangle {
  background: green;
  border: 2px solid white;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg);
}

.box {
  background: green;
  width: 400px;
  height: 80px;
  position: relative;
}

.line {
  height: 39px;
  border-bottom: 2px solid white;
}

.triangle {
  background: green;
  border: 2px solid white;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg);
  position: relative;
  left: 300px;
  top: 28px;
  width: 20px;
  height: 20px;
}

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