Как сверстать такой треугольник?

Question

[NewBeHere]

Добрый вечер, подскажите пожалуйста как сверстать такой треугольник?

Answer 1

[Сергей delphinpro]

Небольшой прямоугольник с overflow:hidden и два его абсолютно позиционированных псевдо-элемента с подобранным положением и border-radius
Суть на картинке:


https://jsfiddle.net/ywh2fd3f/56/

как-то так =)

Comments

[dom1n1k]

"Горе от ума"

[Сергей delphinpro]

dom1n1k, =)

[Адам Сулумов]

Чего только не сделаешь, чтобы не добавить svg'шку на position absolute)

[NewBeHere]

большое спасибо,
вот что пока получилось
https://jsfiddle.net/ywh2fd3f/55/

Answer 2

[Odisseya]

Хвостик в svg, кот. позиционируем абсолютно над блоком.

Comments

[NewBeHere]

Насчет svg думал, начинаю только с ним разбираться, не поможете с кодом?
Я пытался подобную фигуру слепить, но что-то плохо получилось

[Odisseya]

Пожалуйста: https://jsfiddle.net/Odisseya/v37posyf/

[NewBeHere]

Odisseya, большое спасибо!

[NewBeHere]

Odisseya, вы использовали какой-то svg генератор?

[Odisseya]

В редакторе Inkscape (бесплатный) обвела контуром уголок по вашей картинке ;)

[David Halkin]

Odisseya, вы единственный кто дал нормальный ответ на этот вопрос. =)

[Odisseya]

David Halkin, спасибо )))

Answer 3

[Виталий]

Псевдоэлемент (after, before) с беграунд.

Comments

[NewBeHere]

я понимаю, но как скруглить этот треугольник