具有透明度的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 { 
 
\t background: #f0fcff; 
 
\t max-width: 200em; 
 
\t padding: 0 15%; 
 
\t margin: 0 auto; 
 
\t text-align: center; 
 
} 
 

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

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

 
a:hover { 
 
\t color: #0c1524; 
 
} 
 

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

 
ul { 
 
\t text-align: left; 
 
} 
 

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

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

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

 
.ribbon:after { 
 
\t right: -1.35em; 
 
\t border-left-width: .75em; 
 
\t 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>