Задать вопрос
Goldfish777
@Goldfish777
Моддинг игр серии GTA.
css

Как правильно сделать эффект: текст на полоке?

Здравствуйте, подскажите пожалуйста как правильно написать через css эфект текста на полке?
пример на скриншоте 9daa5219274e4e29b24f4d743d54c33a.jpg
я поступил так
согнул border но вот текст обратно выгнуть не получается
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">

#news_head {
  font-family: Verdana;
  font-size: 13px;
  color: #B85C00;
  font-weight: bold;
  padding-bottom: 3px;
  border: thin dashed #111111;
  display: inline-block;
  	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
}

#news_head > .span {
   color: #777777;
   /*выравниваю текст обратно*/
  	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
}

#news_content {
  color: #777777;
}
</style>
</head>

<body>

 <div id="news_head">
    <span >
    заголовок
    </span>
 </div>

 <div id="news_content">
    текст<br><br>
 </div>

</body>

</html>


Помогите пожалуйста
  • Вопрос задан
  • 140 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 3
aliencash
@aliencash
Партизан
codepen.io/aliencash/pen/RryQLG
Ответ написан
Комментировать
Комментировать
@zhainar
Гуглю за вас
https://jsfiddle.net/LqwL7p0o/
Ответ написан
Комментировать
Комментировать
@bogdanchez
https://jsfiddle.net/eufv15ku/1/

Вы ссылаетесь на класс .span которого нет.

И еще тегу span нужно добавить display inline-block.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по работе с TON space и wallet в Telegram
03 мая 2024, в 16:26
3000 руб./за проект
Всплывающая форма на Java Script
03 мая 2024, в 16:09
1200 руб./за проект
Написать 2 чек листа
03 мая 2024, в 16:06
3000 руб./за проект
Ещё заказы