CSS插入边框与透明度

Question

在具有背景颜色的H1上使用CSS寻求匹配附加图像中的标题样式。

在边框上使用透明属性时，边缘变得非常锯齿状，呈钝角。

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

最简单的方法是使用带有Pseudo元素的单个元素并转换

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

请检查此代码 只需使用伪类，使用一个实体和另一个透明值   演示http://codepen.io/anon/pen/JozQyE?editors=110

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;