Triangle shaped pointer / border on a horizontal line

Question

I am trying to create triangle shaped pointer/border on a horizontal line.

Here is an example of what I am trying to achieve:

I tried manipulating the top border of a div, but everything I've done so far doesn't work at all.

Answer 1

There are several ways to achieve that and it probably depends on your layout. One solution is to use a rotated element with borders on two sides.

.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>