具有透明度的 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

最简单的方法是使用带有伪元素和变换的单个元素

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>

Answer 2

请检查此代码 只需使用伪类在两侧使用一个实心值和另一个透明值 演示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>