Использование псевдоселекторов CSS для достижения формы ленты

Question

У меня есть следующая структура, в которой несколько элементов внутри карусели имеют пронумерованный значок, белая часть выше отлично работает при использовании на белом фоне, но в некоторых ситуациях изображение выходит за значок , Можно ли сделать тот же эффект, но с прозрачным белым пространством ниже?

Вот HTML код

<p class="mostwanted"><strong>1</strong></p> 

CSS код

.mostwanted { 
    width: 80px; 
    height: 56px; 
    padding-top: 5px; 
    position: absolute; 
    background: #ffc909; 
    color: white; 
    font-size: 25px; 
    text-align: center; 
    font-family: 'Viga', sans-serif; 
    top: 2px; 
    right:17px; 
    z-index: 10; 
} 
.mostwanted:after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 0; 
    height: 0; 
    border-bottom: 13px solid #fff; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
} 

Образец Fiddle

JsFiddle

Заранее спасибо.

Answer 1

Довольно просто.

JSFiddle Example

Все, что мы делаем, это замена стороны вашего пограничного треугольника.

Этот CSS:

border-bottom: 13px solid #fff; 
border-left: 40px solid transparent; 
border-right: 40px solid transparent; 

Становится это:

border-bottom: 13px solid transparent; 
border-left: 40px solid #ffc909; 
border-right: 40px solid #ffc909; 

А потом просто перенести его за пределы DIV, например, так:

.mostwanted:after { 
... 
    bottom: -13px 
... 
} 

Alternate

другой способом сделать это было бы у себе два pseudos для ленты оборки:

.mostwanted:after, .mostwanted:before { 
    content: ""; 
    position: absolute; 
    bottom: -13px; 
    width: 0; 
    height: 0; 
} 
.mostwanted:after { 
    left: 40px; 
    border-bottom: 13px solid transparent; 
    border-right: 40px solid #ffc909; 
} 
.mostwanted:before { 
    left:0; 
    border-bottom: 13px solid transparent; 
    border-left: 40px solid #ffc909; 
} 

JSFiddle for alternate

Вы заметите, что сглаживание лучше (в Chrome по крайней мере) для второго варианта. Я дам вам объяснение, но я не могу быть на 100% уверенным, почему именно так. Моя образованная догадка заключалась в том, что мы создаем пограничное объединение, а другое - то, что якобы является краем элемента.