Как сверстать это?

Question

[tikos]

Подскажите как сверстать эту надпись "хит"
https://gyazo.com/7c6ba2e7c56805795fd0bc7b3e77a6fb

Answer 1

[キム ファイブプラス]

Вы что с ума сошли? Какая картинка?
https://jsfiddle.net/coxt1o60/1/

Comments

[tikos]

Большое спасибо

Answer 2

[Sanan Yuzb]

Берете отсюда трпапецию https://css-tricks.com/examples/ShapesOfCSS/ и при помощи :before с абсолютным позициириванием ставите. Для поворота исполюзуйте transform:rotate(число deg)

Comments

[tikos]

Спасибо

Answer 3

[xmoonlight]

на фриланс!

Comments

[tikos]

Зачем тогда сделали этот сайт? если можно просто отправлять всех на фриланс... Лучше бы скинули что почитать на эту тему, а не херню писали.

[xmoonlight]

tikos: Следи за текстом, малыш!
А по теме - думай головой!

[Сергей]

tikos: этот сайт нужен для помощи в вопросах, а не "сделайте за меня". Здесь пишут "Я сделал вот так и так, но у меня не вышло, как это сделать лучше тогда"

[tikos]

Сергей: Вопросы был поставлен как "Подскажите как сверстать эту надпись" т.е. можно кинуть какие нибудь гайды где реализовали что-то подобно, можно подсказать какими css тэгами это реализуется, а также конечно же можно просто сверстать и показать, тот кто знает как это делается сделает за 2 минуты. Я не просил сверстать за меня, а лишь подсказать как это реализуется и указать в какую сторону копать.

Answer 4

[Сергей]

Ничего сложного не вижу. Просто див с заливой и текстом по центру. Метку можно по тегу before сделать абсолютным позиционированием

Comments

[tikos]

мне вот не ясно как сделать из него трапецию и повернуть так

[Сергей]

tikos: из чего трапецию? из хит? его просто картинкой

[tikos]

Сергей: Я хочу именно сверстать это, а не картинку вставлять