Polygon Button with pure CSS

Question

I need to code a polygon button that has an outline with pure css and html. This is what I have right now but I can't figure out how to add the outline. This need to be supported in IE as well. How do I do this?

/**** CSS ***/

#statement .polygon {
  width: 290px;
  height: 75px;
  background: #590f20;
  position: relative;
  color: #F94141;
  text-align: center;
  font-size: 1.8em;
  line-height: 2.9em;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 50px;
  margin-bottom: 35px;
}
#statement .bottom:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid #590f20;
  border-bottom: 37.5px solid transparent;
}
#statement .bottom:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 290px;
  width: 0;
  height: 0;
  border-left: 25px solid #590f20;
  border-right: 25px solid transparent;
  border-bottom: 37.5px solid transparent;
}
#statement .top:before {
  content: "";
  position: absolute;
  bottom: 37.5px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid #590f20;
  border-top: 37.5px solid transparent;
}
#statement .top:after {
  content: "";
  position: absolute;
  bottom: 37.5px;
  left: 290px;
  width: 0;
  height: 0;
  border-left: 25px solid #590f20;
  border-right: 25px solid transparent;
  border-top: 37.5px solid transparent;
}

<div id="statement">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="heading">
          <h1></h1>
        </div>
      </div>
    </div>
    <!-- /.row -->
    <div class="row">
      <div class="col-md-3 col-md-offset-4-5">
        <a class="button" href="#button">
          <div class="polygon bottom top">
            Work With Us
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- /.containter -->
</div>
<!-- /#statement -->

Answer 1

Whilst SVG may be an option here, I (have to) add a CSS version. Here's a quick demo, which is using a fixed height but variable width:

div {
  margin: 50px;
  height: 50px;
  min-width: 100px;
  background: lightgray;
  position: relative;
  display: inline-block;
  border-top: 5px solid gold;
  border-bottom: 5px solid gold;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 50px;
  cursor:pointer;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: -5px;
  height: 37px;
  width: 37px;
  background: inherit;
  transform: rotate(45deg);
  transform-origin: top left;
}
div:before {
  left: 0;
  border-left: 5px solid gold;
  border-bottom: 5px solid gold;
}
div:after {
  left: 100%;
  border-top: 5px solid gold;
  border-right: 5px solid gold;
}
/*demo only*/

html {background: #222;}

<div>SOME TEXT</div>

Answer 2

You can try using a css clip-path ploygon and then add another div to get a border.

#statement .polygon .outer {
  display: inline-block;
  width: 290px;
  height: 75px;
  background: #590f20;
  position: relative;
  color: #F94141;
  text-align: center;
  font-size: 1.8em;
  line-height: 2.9em;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
  clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
  -webkit-transform: scale(0.98, 0.95);
  transform: scale(0.98, 0.95);
}
#statement .polygon.border {
  -webkit-clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
  clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
  background-color: orange;
}

<div id="statement">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="heading">
          <h1></h1>
        </div>
      </div>
    </div>
    <!-- /.row -->
    <div class="row">
      <div class="col-md-3 col-md-offset-4-5">
        <a class="button" href="#button">
          <div class="polygon border">
            <span class="outer">
                            Work With Us
                        </span>
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- /.containter -->
</div>
<!-- /#statement -->