테두리가있는 리본

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 수동으로 변경해야합니다.