带有边框的色带

Question

可以创建带边框的色带。我创建默认功能区是这样的：

Ribbon without borders

但我需要的带状这一点。我无法使用图像。

Ribbon with border

什么是最佳的解决方案？

Answer 1

This是我能做的最好的。

h1 span:before, h1 span:after { 
    content: ""; 
    height: 90%; 
    margin-top: 2px; 
    width: 70px; 
    border: 3px solid black; 
    position: absolute; 
    top: 0; 
} 
h1 span:before { 
    right: 100%; 
    border-left: 0 none; 
} 
h1 span:after { 
    left: 100%; 
    border-right: 0 none; 
} 

h1:before, h1:after { 
    content: ""; 
    height: 31px; 
    width: 31px; 
    margin-top: 8px; 
    position: absolute; 
    top: 0; 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

h1:before { 
    border-top: 3px solid black; 
    border-right: 3px solid black; 
    right: calc(100% + 70px - 16px); 
} 
h1:after { 
    border-bottom: 3px solid black; 
    border-left: 3px solid black; 
    left: calc(100% + 70px - 16px); 
} 

注意：

• 不会与旧的浏览器工作不支持：transform，calc，:before和:after
• 这适用于标题的任何长度但是，如果更改字体大小，则必须手动更改h1:before, h1:after的宽度和高度。