Лента через контейнер в Bootstrap 3 не работает

Question

Я не совсем уверен, что я делаю здесь не так.

Я пытаюсь наложить ленту на контейнер, используя пример на этом сайте: http://www.andreapinchi.it/css3-ribbon-effect/

Я создал макет этой проблемы здесь: http://jsbin.com/rebexatijizi/1/edit

Не очень похож на других.:(

* ПРИМЕЧАНИЕ. Ссылка JSBIN обновлена ​​выше, чтобы показать текущий статус.

Answer 1

ДЕМО: http://jsbin.com/tibaqenawena/4/edit

CSS:

.ribbon, .ribbon:before, .ribbon:after {box-sizing:content-box;}

Вы также можете просто настроить математику в своем CSS, чтобы включить отступы и границы. ДЕМО: http://jsbin.com/dupac/1/edit

div.both_ribbon::before{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    left: -2px;
    content: "";
    border-bottom: 10px solid transparent;
    border-right: 10px solid rgb(0, 80, 116);
}

div.both_ribbon::after{
    display: block;
    width: 10px;
    height: 0px;
    position: absolute;
    bottom: -10px;
    right: -2px;
    content: "";
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgb(0, 80, 116);
  }

Кроме того, ваш CSS испорчен, и он все еще есть, у вас есть вложенный стиль в другом стиле.

Answer 2

Ваши свойства размера коробки, кажется, все портят. В bootstrap.css удалите правила определения размеров ящиков. Кроме того, удалите отступы из своего контейнера (вы можете добавить еще один дочерний элемент в свой контейнер, у которого вместо этого есть отступы). Вот код, который вы должны удалить:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

:before, :after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}