Использую bootstrap3. Пробую для карточки с товаром сделать ленточку. Но как скрыть края, которые сильно выступают?
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
.corner-ribbon {
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.corner-ribbon.top-right {
top: 25px;
right: -50px;
left: auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.corner-ribbon.blue {
background: #39d;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<br>
<br>
<div class="col-sm-6 rabbit breed_1 gender_1 color_1 cost_100-150 weight_1250 type_1 type_3">
<div class="thumbnail">
<img src="" alt="...">
<div class="corner-ribbon top-right sticky blue">Test</div>
<div class="caption">
<h3><span title="Имя">Имя</span> <small title="">доп имя</small></h3>
<p>
<span class="label label-primary" title="">енп</span>
<span class="label label-default" title="">апр</span>
<span class="label label-info" title="">апр</span>
<span class="label label-warning" title="">апрпарпа</span>
<span class="label label-warning" title="">арап</span>
</p>
<p class="text-justify">Идейные соображения высшего порядка, а также начало повседневной работы по формированию позиции способствует подготовки и реализации дальнейших направлений развития. Значимость этих проблем настолько очевидна, что новая модель организационной деятельности
в значительной степени обуславливает создание соответствующий условий активизации.</p>
</div>
</div>
</div>