Polygon Button mit reinem CSS

Question

Ich muss einen Polygon-Button, der einen Umriss mit reinem CSS und HTML hat, codieren. Dies ist, was ich gerade habe, aber ich kann nicht herausfinden, wie man den Umriss hinzufügt. Dies muss auch in IE unterstützt werden. Wie mache ich das?

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

Sie können versuchen, eine CSS-Clip-Pfad ploygon mit und fügen Sie dann ein anderes div einen Rahmen zu bekommen.

#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

Während SVG hier eine Option sein kann, ich (müssen), eine CSS-Version hinzuzufügen. Hier ist eine kurze Demo, die eine feste Höhe, aber mit variabler Breite verwendet:

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>