Nút đa giác có CSS ​​tinh khiết

Question

Tôi cần mã một nút đa giác có đường viền với css và html thuần túy. Đây là những gì tôi có ngay bây giờ nhưng tôi không thể tìm ra cách thêm đường viền. Điều này cũng cần được hỗ trợ trong IE. Làm thế nào để tôi làm điều này?

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

Bạn có thể thử sử dụng một css clip-đường ploygon và sau đó thêm một div để có được một biên giới.

#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

Trong khi SVG có thể là một lựa chọn ở đây, tôi (phải) thêm một phiên bản CSS. Dưới đây là một bản demo nhanh chóng, đó là sử dụng chiều cao cố định nhưng chiều rộng biến:

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>