Nsokyi Nsokyi - 7 months ago 26
HTML Question

Making an outline border for a pointy button in CSS

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?

pointy button

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

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>