Simon Hagmann Simon Hagmann - 3 months ago 21
CSS Question

CSS button - transparent arrow on both sides

I am trying to create the brown button by using the pseudo-elements before and after. It's not possible to add more HTML elements so I'm searching for a solution with CSS/LESS.

enter image description here

How is it possible to make the currently white border-color of these triangles transparent? This can be done with CSS or LESS.

//EDIT: The marked topic does not answer my question because I need a different angle than just rotating a square. It is also not transparent. I also can not modify the DOM to use SVG.

This is the current CSS Code:



body {
background:#c2c2c2;
}

//button
.btn {
padding: 2px 10px 2px 10px;
line-height: 32px;
display: inline-block;
position: relative;
border: none
color: #fff;
background: #a00;
}
.is--primary {
border-radius: 0;
background: #a9825c;
border: 0 none;
}
.is--large {
height: 53px;
padding: 0px 60px 0px 60px;
}


button:after,
button:before {
position: absolute;
top: 0;
content: '';
border-style: solid;
height: 0px;
width: 0px;
top: 8px;
content: '';
border-style: solid;
}


button:before {
float: left;
left: 8px;
border-width: 26.5px 0 26.5px 15px;
border-color: transparent transparent transparent #ff0000;
}


button:after {
float: right;
right: 0;
border-width: 26.5px 15px 26.5px 0;
border-color: transparent #ff0000 transparent transparent;
}

<button class="btn is--primary is--large is--bookmark" href="#">Über uns</button>




Answer

The best solution is to reverse the triangles (so you're adding top and bottom triangles that match the button, but not on the sides). You can technically make "transparent" triangles, but you can't have that transparency apply to a different object.

One of the most important things I changed was that the background color and padding of the button has to apply to the span element (which means each button will need an interior span), not .btn.

If you replace all of your CSS about the buttons with the below, you'll have a solution that gets you at least 90% of the way there. The angle isn't perfect because it's stopping at the text. If you want to make the angle truly perfect, you'll probably need to do some absolute positioning, which would make it messy as your button sizes change.

The non-code way you can also achieve this is to create a .png or .svg with triangles that match the color of your button and insert them into the :before and :after with content: ' ';

body { margin: 20px; background:#c2c2c2; }

.btn {
  display: inline-block;
  text-shadow: 0 1px 0 #000;
  font-weight: bold;
  text-transform: uppercase;
}

.btn {
  padding: 11px 40px;
  color: #fff;
  position: relative;
  background: #a00;
}

.btn:before, .btn:after {
  content: '';
  border-top: 20px solid #a00;
  border-bottom: 20px solid #a00;
  position: absolute;
  top: 0;
}

.btn:before {
  border-left:20px solid transparent;
  left: -20px;
}

.btn:after {
  border-right:20px solid transparent;
  right:-20px;
}
<div class="btn">Text in my little banner button</div>

Comments