Making an outline border for a pointy button in CSS - html

Question

Is it possible to make a button in CSS like the image below. I have tried in jsfiddle and I can get a solid shape but not one with a outline border?
jsfiddle code:
<div class="point-btn"></div>
.point-btn
{
width: 148px;
height: 34px;
background: #0a187e;
position: relative;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
margin-left:50px;
}
.point-btn:before
{
content:"";
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}

Answer 1

Not too pretty- but you should get a decent starting point, simply use another pseudo element overlain on your existing triangle shape:
Demo Fiddle
.point-btn {
width: 148px;
height: 28px;
border: 2px solid #0a187e;
background: #fff;
position: relative;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.point-btn:after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 0px;
border-top: 14px solid transparent;
border-left: 10px solid #fff;
border-bottom: 14px solid transparent;
}
.point-btn:before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -4px;
height: 0;
border-top: 18px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
<div class="point-btn"></div>

Answer 2

Set a child element and overlay triangle as well.
You need to tweak up your markup a bit by adding span as a child element.
Demo
Here, what I did is, am cloning your triangle with different dimensions and overlay on your blue triangle, that will give your triangle a border effect, and next, I set absolute span element which is again positioned absolute to the parent element. If you want you can also use margin to set the element right and get rid of the /absolute position.
.point-btn {
width: 148px;
height: 34px;
background: #0a187e;
position: relative;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.point-btn:before {
content: "";
position: absolute;
left: 148px;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
.point-btn:after {
content: "";
position: absolute;
left: 147px;
width: 0;
height: 0;
top: 4px;
border-top: 13px solid transparent;
border-left: 10px solid #fff;
border-bottom: 13px solid transparent;
}
.point-btn span {
width: 142px;
background: #fff;
height: 25px;
position: absolute;
top: 4px;
left: 5px;
}
<div class="point-btn"><span></span>
</div>