Search code examples
csstwitter-bootstrapcss-shapes

Is it possible to give a bootstrap btn a 5 point?

I'm looking to make a bootstrap btn look a little differently with there being a 5 point at the bottom of its base. I know its possible to do shapes this way using the :before and :after tools and transform but I want to put text inside of them which is why I'm having so much trouble. Is it possible to deal directly with the btn class to make this effect happen?enter image description here

Solution

  • You can use SkewY as shown in the demo below:

    div {
  height: 100px;
  width: 500px;
  display: inline-block;
  border: 10px solid green;
  border-bottom: none;
  text-align: center;
  line-height: 100px;
  position: relative;
  color: green;
  font-size: 20px;
}
div:before,
div:after {
  content: "";
  border-bottom: 10px solid green;
  position: absolute;
  width: calc(50% + 10px);
  height: 100%;
  top: 0;
}
div:before {
  transform: skewY(5deg);
  left: -10px;
}
div:after {
  transform: skewY(-5deg);
  left: 50%;
}
    <div>Request a Quote</div>