CSS inset border with transparency

Question

Seeking to match heading style in attached image using CSS on H1 that has a background color.

When using transparent properties on border the edges become very jagged with the obtuse angle.

Codepen: http://codepen.io/rocksoup/pen/bNZZmJ

HTML:

<div class="big-bg"></div>
<div class="section">
  <h2 class="ribbon">Header Title</h2>
  <p>PLACEHOLDER lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae sapien et quam commodo gravida sed eu nisi. Pellentesque a dui est. Nulla imperdiet nibh quis sem condimentum laoreet. Aliquam vel nisi posuere, mollis erat ut, mattis elit. Aenean tristique a magna ac tristique. Ut malesuada lorem nec elit pulvinar rutrum. Sed scelerisque dui id dui aliquam elementum at eget quam. Nunc ultricies leo orci, eu pharetra tellus molestie vitae. Quisque ultricies augue purus, ac scelerisque nulla luctus non.

Sed pretium, risus nec aliquam aliquam, arcu tellus fermentum justo, in cursus orci massa imperdiet magna. Suspendisse risus augue, mollis non lacus ut, hendrerit venenatis risus. Mauris pulvinar turpis id sem venenatis scelerisque a vitae ipsum. Aliquam non tortor imperdiet, auctor nulla id, tristique nunc. Nunc pretium ornare erat, vitae dictum odio viverra vel. Aliquam consequat nunc tellus. Curabitur et volutpat massa. Praesent placerat nec velit et tincidunt. Sed purus lacus, vulputate vel est ut, viverra suscipit justo. Aenean a efficitur magna, in pharetra nulla. Sed massa tortor, blandit id eros eu, malesuada iaculis magna.</p>
</div>

SCSS:

// Colors
$color-bg-body: #f0fcff;
$color-primary: #1f355e;

// Initial Styles
body{ background: $color-bg-body; max-width: 200em; padding: 0 15%; margin: 0 auto; text-align: center; }
.big-bg{
  background:url(http://www.thewallpapers.org/photo/22244/Forrest-Green-Nature.jpg);
  width: 100%;
  height: 600px;
}
a{ color: $color-primary; text-decoration: none; transition: 0.2s ease color;
  &:hover{ color: darken($color-primary, 15%); }
}
p, li{ color: rgba(black, 0.6); line-height: 1.5em; }
ul{ text-align: left; }

.ribbon{
  // Ribbon Variables
  $ribbon-height: 2.8125em;
  $ribbon-width: 24em;

  position: relative;
  max-width: $ribbon-width;
  margin: -1.4em auto 2em;
  height: $ribbon-height; line-height: $ribbon-height;
  background: $color-primary;
  color: #fff;
  text:{
    align: center;
    transform: uppercase;
  }
  font:{
    weight: normal;
    size: 1.2em;
  }

  // Ribbon Triangles
  &:before,
  &:after{
    content: '';
    display: block;
    width: 0; height: 0;
    position: absolute;
    top: 0;
    border-top: solid $ribbon-height/2 transparent;
    border-bottom: solid $ribbon-height/2 transparent;
  }

  &:before{
    left: 0;
    border-left: solid $ribbon-height/4 $color-bg-body;
  }

  &:after{
    right: 0;
    border-right: solid $ribbon-height/4 $color-bg-body;
  }
}

Answer 1

Please check this code Just use one solid and another transparent value both side using pseudo class demo http://codepen.io/anon/pen/JozQyE?editors=110

body {
	background: #f0fcff;
	max-width: 200em;
	padding: 0 15%;
	margin: 0 auto;
	text-align: center;
}

.big-bg {
	background: url(http://www.thewallpapers.org/photo/22244/Forrest-Green-Nature.jpg);
	width: 100%;
	height: 600px;
}

a {
	color: #1f355e;
	text-decoration: none;
	-webkit-transition: .2s ease color;
	transition: .2s ease color;
}

a:hover {
	color: #0c1524;
}

p,
li {
	color: rgba(0, 0, 0, .6);
	line-height: 1.5em;
}

ul {
	text-align: left;
}

.ribbon {
	position: relative;
	max-width: 24em;
	margin: -1.4em auto 2em;
	z-index: 1;
	height: 2.8125em;
	line-height: 2.8125em;
	background: #1f355e;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.2em;
}

.ribbon:before,
.ribbon:after {
	content: "";
	width: .5em;
	top: 0;
	position: absolute;
	display: block;
	border: 1.45em solid #1f355e;
	z-index: -2;
}

.ribbon:before {
	left: -1.45em;
	border-right-width: .75em;
	border-left-color: transparent;
}

.ribbon:after {
	right: -1.35em;
	border-left-width: .75em;
	border-right-color: transparent;
}

<div class="big-bg"></div>
<div class="section">
  <h2 class="ribbon">Header Title 
    <span></span>
  </h2>
  <p>PLACEHOLDER lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae sapien et quam commodo gravida sed eu nisi. Pellentesque a dui est. Nulla imperdiet nibh quis sem condimentum laoreet. Aliquam vel nisi posuere, mollis erat ut, mattis elit. Aenean tristique a magna ac tristique. Ut malesuada lorem nec elit pulvinar rutrum. Sed scelerisque dui id dui aliquam elementum at eget quam. Nunc ultricies leo orci, eu pharetra tellus molestie vitae. Quisque ultricies augue purus, ac scelerisque nulla luctus non.

Sed pretium, risus nec aliquam aliquam, arcu tellus fermentum justo, in cursus orci massa imperdiet magna. Suspendisse risus augue, mollis non lacus ut, hendrerit venenatis risus. Mauris pulvinar turpis id sem venenatis scelerisque a vitae ipsum. Aliquam non tortor imperdiet, auctor nulla id, tristique nunc. Nunc pretium ornare erat, vitae dictum odio viverra vel. Aliquam consequat nunc tellus. Curabitur et volutpat massa. Praesent placerat nec velit et tincidunt. Sed purus lacus, vulputate vel est ut, viverra suscipit justo. Aenean a efficitur magna, in pharetra nulla. Sed massa tortor, blandit id eros eu, malesuada iaculis magna.</p>
</div>

Answer 2

The easiest way to do that is to use a single element with Pseudo elements and transform

body{height: 100vh;text-align: center; transition: background.3s ease}
body:hover{background: red}
 
.ribbon{
  position: relative;
  background: #333;
  display: inline-block;
  width: 480px;
  height: 80px;
  line-height: 80px;
  color:white;
  z-index: 1
}
.ribbon:before, .ribbon:after{
  content: '';
  position: absolute;
  background: #333;
  width: 100%;
  z-index: -1;
  height: 100%;
}
.ribbon:before{
  left: 0;
  transform: skew(32deg);
}
.ribbon:after{
  right: 0;
  transform: skew(-32deg);
}

<h2 class="ribbon">Header Title</h2>