Мне нужно что-то вроде этого:
Как этого добиться с помощью css? Я знаю, что один из способов - использовать фоновое изображение, но могу ли я добиться этого только с помощью CSS без какого-либо изображения?
html
css
image
strikethrough
Ярослав Климчик
источник
источник
transform
котором я знаю, если только он не может работать сfilter
Вы можете использовать фон
linear-gradient
с,currentColor
чтобы избежать жесткого кодирования цвета шрифта:Если вам не нужно, чтобы элемент был полностью встроенным, вы можете использовать псевдоэлемент, чтобы разместить строку поверх элемента. Таким образом, угол можно отрегулировать, изменив размер псевдоэлемента:
источник
источник
Я думаю, вы могли бы применить эффект вращения к горизонтальной линейке. Что-то вроде:
С помощью CSS:
Скрипка
Ваш пробег может варьироваться в зависимости от браузера и версии, поэтому я не уверен, что прибегну к этому. Возможно, вам придется создать какой-нибудь забавный код VML, например, для поддержки старых версий IE.
источник
-7
градусы, а не+7
; примечание 2:HR
серый в Chrome; это возможно отменить?border-color
иbackground-color
. Обновленный FiddleCSS3 градиент
Мой пример не удовлетворит ваши потребности, но для получения дополнительной информации и забавных настроек см. Http://gradients.glrzad.com/ .
То , что вы должны сделать , это создать
background-gradient
изwhite-black-white
Располагайтеopacity
на что - то вроде48% 50% 52%
.источник
Я не думаю, что для этого есть устойчивое решение css.
Мое решение на чистом CSS заключалось бы в том, чтобы поместить другой элемент текста позади вашего первого элемента текста, который будет идентичным по количеству символов (символы - это ''), разделению текста на сквозную строку и преобразованию поворота.
Что-то вроде:
Пример поворота текста
Я с нетерпением жду лучших ответов от других пользователей.
источник
Это старый вопрос, но в качестве альтернативы вы можете использовать, например, линейные градиенты CSS3 ( http://codepen.io/yusuf-azer/pen/ojJLoG ).
Для подробного объяснения и проверки МЕНЬШЕГО решения
http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagonal-line-through-with-css3/
источник
Я сделал это таким образом, используя SVG в HTM с классом CSS:
HTML:
CSS:
К настоящему времени могут быть более простые способы. Я просто приготовил это в крайнем случае для своей страницы специального предложения с описанием продукта. Надеюсь, это кому-то поможет.
источник
Пытаться
источник
А вот модная версия:
источник