Przycisk wielokąta z czystym CSS

Question

Potrzebuję kod przycisku wielokąta, który ma zarys z czystym css i html. Oto, co mam teraz, ale nie wiem, jak dodać kontur. Tę potrzebę należy wspierać również w IE. Jak mam to zrobic?

/**** 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

Można spróbować użyć css tworzenia wielokątów clip-path, a następnie dodać inny div, aby uzyskać granicę.

#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 -->

Answer 2

Podczas SVG może być opcja tutaj, I (trzeba) dodać wersję CSS. Oto krótkie demo, która używa stałej wysokości, ale o zmiennej szerokości:

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>