Polygon Button with pure CSS [duplicate] - html

Question

This question already has answers here:
Elongated hexagon shaped button using only one element
(4 answers)
Closed 7 years ago.
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

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

Answer 2

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>