Button shape with CSS - css

Question

I'm trying to create an 'easy' button shape with css pseudeo :after/:before class.
I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.
button{
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
}
button:after{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-right: solid 2px #000;
}
button:before{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-left: solid 2px #000;
}
<button>Let's do it</button>
Can someone give me a hint?

Answer 1

You can create this with :before and :after pseudo elements one for border and other one above for orange background.
button {
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
position: relative;
}
button:after,
button:before {
border-style: solid;
border-width: 50px 110px 0 140px;
border-color: #FFA500 transparent transparent transparent;
content: '';
position: absolute;
left: -2px;
top: 100%;
}
button:after {
transform: translateY(-1px);
}
button:before {
border-color: black transparent transparent transparent;
}
<button>Let's do it</button>

Answer 2

Not exactly the same size but you can play with the following one:
#pentagon {
margin-top: 45px;
position: relative;
width: 250px;
border-width: 70px 0 0;
border-style: solid;
border-color: orange transparent;
}
#pentagon:after {
content: "";
position: absolute;
height: 0;
width: 0;
top: -30px;
left: 0px;
border-width: 50px 125px 0 125px;
border-style: solid;
border-color: orange white;
}
<div id="pentagon"></div>

Answer 3

You could play with this, it has a border like your image http://www.cssarrowplease.com/