CSS의 리본 - 측면

Question

.ribbon { 
    width: 288px; 
    position: absolute; 
    top: 123px; 
    left: 250px; 
    background: #000; 
    font-family: 'Lobster Two', Helvetica, sans-serif; 
    font-size: 30px; 
    letter-spacing: 1px; 
    font-style: italic; 
    line-height: 60px; 
    height: 60px; 
    font-weight: normal; 
} 
.ribbon:before, .ribbon:after { 
    content: ''; 
    position: absolute; 
    display: block; 
    border: 30px solid #333333; 
    z-index: -1; 
} 
.ribbon:before { 
    left: -33px; 
    top: -10px; 
    border-left-width: 15px; 
    border-left-color: transparent; 
} 
.ribbon:after { 
    right: -33px; 
    bottom: -10px; 
    border-right-width: 15px; 
    border-right-color: transparent; 
} 

의 폭을 제어하는 ​​...하지만 난 아주가이처럼 보이게 측면의 폭을 제어 할 수 없습니다 :

이

Answer 1

당신이 이것을 달성 할 수 border-right-width은 ::before이고 border-left-width:은 ::after입니다. 적어도 내가 그렇게 할 때 펜에서 작동합니다.

http://codepen.io/anon/pen/wHCeA

펜을 보여주는.