CODEWITHSUNDEEP
htmlcss
Nsokyi
Nsokyi

Reputation: 394

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

Upvotes: 2

Views: 3371

Answers (2)

SW4
SW4

Reputation: 71150

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>

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157314

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>

Upvotes: 2

Related Questions