simple CSS envelope

envelope.less

@background: rgb(31, 37, 50);

.envelope-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 16px;
  margin-right: 10px;
  margin-left: 25px;
  vertical-align: top;
  border-radius: 2px;
  background-color: white;
  .chevron {
    position: absolute;
    top: 5px;
    left: 2px;
    padding: 1px 8px;
  }
  .chevron::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 51%;
    height: 100%;
    content: '';
    transform: skew(0deg, 35deg);
    background: @background;
  }
  .chevron::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    content: '';
    transform: skew(0deg, -35deg);
    background: @background;
  }
}

HTML:

<div className="envelope-icon"><span className="chevron"/></div>