Как наклонный / наклонный фоновый цвет можно установить для текста с помощью HTML-CSS

Question

Как наклонный / наклонный фоновый цвет можно установить для текста с помощью HTML-CSS

0

То, что мне нужно достичь, похоже на то, что появляется на следующем примере изображения.

Мне нужно, чтобы фон увеличивался по тексту, потому что тексты могут быть динамическими, поэтому я не могу установить статический фон изображения. Также текст должен иметь возможность перекрывать более темную полосу фона (как вы можете видеть в "l" "lorem" в примере), и может быть более одной строки текста.

Решения Crossbrowser приветствуются.

Harley Fuagras 08 дек. 2013, в 13:04

Источник

Теги:

html

css

html5

background-color

1 ответ

Ещё вопросы

acfrancis · Accepted Answer · 2013-12-08T10-25-00.000Z

Что-то вроде этого должно начать вас:

<div class="bottom">
    <br>
    <div class="under">
        <div class="over">
            lorem ipsum dolor
        </div>
    </div>
</div>

.bottom {
    background-color: #bbb;
    height: 100px;
}

.under {
    background-color: #555;
    transform: rotate(5deg);
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari and Chrome */
}

.over {
    margin-left: 120px;
    color: white;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */
}

Пример:

http://jsfiddle.net/CxmRg/

Спасибо, это было полезно. (Забудьте сказать что-нибудь раньше, извините)