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

筆示範。