Pure CSS Triangle with stroke and fill. Via http://jhaurawachsman.com/2013/css-triangles-border-stroke/

css-nubbin.html

<style type="text/css">
.tri-down {

    /* Styling block element, not required */
    position: relative;
    margin-bottom: 2em;
    padding: 1em;
    border-bottom: 1px solid #999;
    background: #f3f3f3;
  }

  /* Required for Down Triangle */
  .tri-down:before, .tri-down:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-bottom: 0;
  }

  /* Stroke */
  .tri-down:before {
    bottom: -16px;
    left: 21px;

    /* If 1px darken stroke slightly */
    border-top-color: #777;
    border-width: 16px;
  }

  /* Fill */
  .tri-down:after {
    bottom: -15px;
    left: 22px;
    border-top-color: #f3f3f3;
    border-width: 15px;
  }
</style>

<!-- Element you want to add a down triangle to. -->
<div class="tri-down">Box with Down Triangle a.k.a. "Nubbin"</div>