Possible to Design This Button with Angled Corners Using Only CSS and No Images

Question

I'm trying to design a button using only CSS, and no images. The issue is with the bottom-left and top-right corners, and I'm using a background-color to achieve this when the button is on a solid background color. The issue is when the background is not a solid color and you can see the corners, like in the demo below.

So, I'd like to come up with a universal way to code this button with just CSS and no images.

Thanks!

Here is a demo of the button →

Here is the HTML I have in my demo:

<div id="banner">
  <div id="button-box">
    <a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
  </div>
</div>

And the CSS:

#banner {
  background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 200px;
  text-align: center;
}

#button-box {
  padding: 50px 0;
}

/* Button */
.btn-cornered {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  display: inline-block;
  line-height: 53px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  border: 1px solid #fff;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  text-decoration: none;
}
.btn-cornered:before {
    position: absolute;
    left: -1px;
    bottom: -1px;
    content: "";
    border-bottom: 11px solid #fff;
    border-right: 11px solid transparent;
}
.btn-cornered:after {
    position: absolute;
    left: -2px;
    bottom: -2px;
    content: "";
    border-bottom: 11px solid;
    border-right: 11px solid transparent;
}

.btn-cornered span {
    top: -2px;
    left: -1px;
    position: relative;
    padding-right: 20px;
    display: block;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.btn-cornered span:before {
    position: absolute;
    content: "";
    border-bottom: 11px solid transparent;
    border-right: 11px solid #fff;
}
.btn-cornered span:after {
    position: absolute;
    content: "";
    border-bottom: 11px solid transparent;
    border-right: 11px solid;
}


/* Dark Background Styles */
.btn-cornered-dark-bg {
    height: 53px;
}
.btn-cornered-dark-bg:after {
    border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
    max-width: none;
    line-height: 58px;
    font-size: 24px;
    height: 53px;
    width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
    right: 1px;
    top: 1px;
}
.btn-cornered-dark-bg span:after {
    border-right-color: #000;
    right: 0px;
    top: 0px;
}

Answer 1

Here's an example using pseudo elements and an extra span that is skewed to make the angled corners. The trick is hiding the overflow on the button and, with a little finesse, correctly lining up the skewed borders from the span.

I'm not fully satisfied as it requires the extra span and seems a bit fragile when changing font sizes, but here it is:

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: steelblue;
}

button {
  background: transparent;
  padding: 10px 20px;
  position: relative;
  border: none;
  margin: 20px;
  overflow: hidden;
  color: white;
}

button::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15px;
  right: 15px;

  content: '';
  border-left: 1px solid white;
  border-top: 1px solid white;
}

button::after {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 15px;
  left: 15px;
  
  content: '';
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

button span {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -18px;
  bottom: 0;
  left: 15px;
  border: 1px solid white;
  transform: skew(45deg);
  transform-origin: bottom left;
}

<button>
  <span></span>
  Sign up &amp; Stay Connected
</button>