Итак, задача: перечеркнуть слово или блок текста или картинку диагональными линиями крест-накрест. Нам поможет SVG.

Демка

Напишем стили для строчного тега del и подготовим класс для перечёркивания блочных элементов .del-cross.

del.cross {
    display:inline-block; /* запрещает перенос текста на следующую строку */
    text-decoration:none;
    position:relative;
}

.del-cross {
    display:block;
    position:relative;
    overflow:hidden; /* запрещает обтекать другие блоки */
}

del.cross:before,
.del-cross:before {
    content:'';
    position:absolute;
    display:block;
    width:auto;
    height:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0) url(cross.svg) no-repeat;
    background-size:100% 100%; /* растягивает фон на всю ширину и высоту блока */
}

Пример:

See the Pen 2012-crosswise-demo by Paul Radzkov (@paulradzkov) on CodePen.

Для картинок класс .del-cross нужно ставить на их обёртку. Тег img не имеет псевдокласса :before.

А теперь посмотрим, что внутри SVG-файла, и как настроить цвет и толщину линий.

cross_old.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" >
    <line x1="0" y1="0"   x2="100" y2="100" vector-effect="non-scaling-stroke" />
    <line x1="0" y1="100" x2="100" y2="0"   vector-effect="non-scaling-stroke" />
</svg>

viewBox="0 0 100 100" — задает виртуальный размер картинки 100×100 безразмерных единиц. Формат записи: x1 y1 x2 y2.

preserveAspectRatio="none" — отключает сохранение пропорций при масштабировании.

vector-effect="non-scaling-stroke" — чтобы толщина линий не зависела от размеров картинки. К сожалению, не работает в IE9 и IE10.

style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" — цвет линий можно задавать как в hex, так и в rgba с прозрачностью, а толщину линий делать дробной.

Поддержка браузерами

SVG не поддерживается IE8 и ниже. Да и в IE9-IE10 толщина линий изменяется пропорционально размерам перечёркиваемого блока, что есть баг. Есть решение.

Для браузеров, не поддерживающих SVG, можно сделать деградацию с помощью условных комментариев или наоборот, используя Modernizer, сделать прогрессивное улучшение только для тех, кто умеет отображать SVG.

Обновлено 9 апреля 2013

В комментариях GreLI подсказал, что SVG-файл можно сократить до такого вида (cross.svg):

<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgba(255,0,0,0.9); stroke-width: 1.5" >
    <line x1="0" y1="0"    x2="100%" y2="100%" />
    <line x1="0" y1="100%" x2="100%" y2="0"    />
</svg>

Задавая координаты линий в процентах, мы избавляемся от необходимости применять vector-effect="non-scaling-stroke", который не работает в IE9 и IE10.