CSS shape: Arrow down with 1px border

HTML

<div class="title">My title</div>
<p>If you don't already know about CSS shapes:<br><br>
<a href="https://css-tricks.com/examples/ShapesOfCSS/" target="_blank">https://css-tricks.com/examples/ShapesOfCSS/</a><br><br>
<a href="https://css-tricks.com/snippets/css/css-triangle/" target="_blank">https://css-tricks.com/snippets/css/css-triangle/</a></p>

CSS

body {
  background-color: white;
}

%triangle-down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 12.5px 0 12.5px;
  border-color: #e6e5e3 transparent transparent transparent;
}
%triangle-down--in {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 11.5px 0 11.5px;
  border-color: #ffffff transparent transparent transparent;
}

.title {
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e6e5e3;
  &:before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20px;
    @extend %triangle-down;
  }
  &:after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 21px;
    @extend %triangle-down--in;
  }
}