0

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

teobais
  • 2,820
  • 1
  • 24
  • 36
Bs3kg
  • 109
  • 1
  • 2
  • 13
  • 3
    What have you tried? This is not a code writing service so have a go and we're more than willing to help if you get stuck. – StudioTime Apr 30 '16 at 17:53

2 Answers2

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>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • Thank you jbutler. I was using SkewY but I wasn't able to reproduce the shape. The width calc is something new I didn't realize I could do. Thanks! – Bs3kg Apr 30 '16 at 18:25
0

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129