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?

回答1:

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>

回答2:

gradient can be a first chip approach ...

example in situation: http://codepen.io/gc-nomade/pen/wGEyvd

button {
  color:green;
  display:block;
  width:50%;
  margin:1em auto;
  padding:1.5em 0 2.5em;
  border:none;
  background:linear-gradient(to left, green, green) top,
    linear-gradient(to bottom, green,green) top left,
    linear-gradient(to bottom, green,green) top right,
    linear-gradient(to bottom left, transparent 45%, green 47%, green 51%, transparent 52%) bottom left,
    linear-gradient(to bottom right, transparent 45%, green 47%, green 51%, transparent 52%) bottom right;
  background-repeat:no-repeat;
  background-size:100% 3px, 3px 70%, 3px 70%,50% 30%, 50% 30%;
}

<button>REQUEST A CODE</button>