Как без картинки реализовать такой фон заголовка?

Question

[Justin Bieber]

Что имеем:

без ховера



с ховером



А хотелось бы так:



https://jsfiddle.net/gn15ufmb/7/ угол слишком острый, должен быть закругленным

Answer 1

[Андрей]

https://codepen.io/AndrewHaze/pen/RZaBRV

Comments

[Justin Bieber]

нужно по другому

[Андрей]

Так что-ли https://codepen.io/AndrewHaze/pen/RZaBRV

[Justin Bieber]

Андрей: ага, только угол должен как горка спускаться плавно, а не просто угол

[Андрей]

Ну тогда быстрей и проще сделать с помощью SVG

[Justin Bieber]

Андрей: а как это вставить ? ))

[Андрей]

Justin Bieber: Практическое руководство

[Justin Bieber]

Андрей: спс попробуем, то что надо вроде )

[Justin Bieber]

Андрей: можете скинуть файл .svg если не трудно? хочу через css фоном поставить

[Андрей]

Justin Bieber: Создайте файл с расширением .svg и скопируйте туда код, и будет у вас файл SVG

[Justin Bieber]

Андрей: https://codepen.io/anon/pen/ZJWZJp как поставить так, чтоб на разных заголовках автоматом растягивалось?

[Андрей]

Justin Bieber: Засуньте svg в :before

div:before {
  content: "";
    background-image: url(test.svg);
}

[Justin Bieber]

Андрей: сделал через бефоре, но все равно оно стоит на разных заголовках одинаково

Answer 2

[Игорь Перегудов]

псевдоэлемент треугольник
загугли "треугольник на css"
или генератор треугольников css

Comments

[Justin Bieber]

почему треугольник?

[Justin Bieber]

типа у треугольника можно один из углов закруглить?

[Игорь Перегудов]

Justin Bieber: угумс
либо посмотри как я такое здесь реализовал тыц

[Justin Bieber]

нет, нужно именно не ровный угол, ровный угол я то и сделал, нужно чтоб был изгиб

Answer 3

[Антон Федорян]

https://jsfiddle.net/slippyk/pxoxo2ff/