Does anyone know how to assign an edge to a triangle made with css?

Question

The code is this:

div {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 30px 40px;
    border-color: transparent transparent #007bff transparent;
}

<div/>

I want to create an edge on it.

Answer 1

You can make a triangle within another:

.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 44px 34px 44px;
  border-color: transparent transparent #007bff transparent;
}
.inner-triangle {
  position: absolute;
  top: 6px;
  left: -38px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 38px 28px 38px;
  border-color: transparent transparent #f09 transparent;
}

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