Как сделать ломаный border под абзацем?

Question

[Jack London]

В общем есть текст, заданный блоком и нужно сделать border как на картинке, вся сложность в треугольной засечке или как там её называют.

Буду очень благодарен за помощь!

Answer 1

[Владислав Поляков]

Используя :before и :after

.content-inner {
    width: 300px;
    height:300px;
    background: #FFF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}
.content-inner::before {
    content: "";
    display: block;
    border: 11px solid transparent;
    border-right-color: #DDD;
    position: absolute;
    top: 47px;
    left: -22px;
}
.content-inner::after {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-right-color: #FFF;
    position: absolute;
    top: 48px;
    left: -20px;
}

Меняя значения top, left ? указываешь положения засечки.
Более подробно