Авто-изменение размера перекошенного фона в CSS (+ изображения?)

Ответ 1

Для всех, кто интересуется, здесь мое временное решение: живая демонстрация.

Я использовал этот спрайт:

HTML:

<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">Short title</span></h2>
</div>
<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">A bit longer title</span></h2>
</div>
<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">A damn long title is here!</span></h2>
</div>

(div .container нужен только для вариаций)

CSS

.sub-heading, .sub-heading:after, .sub-heading:before {
    background:url(tha-sprite-url.png) 0 0 no-repeat;
}

.sub-heading {
    position:relative;
    display:inline-block; clear:both;
    margin-left:31px; padding:0 18px 10px 0;
    font-size:25px; font-weight:normal; color:#FFF; line-height:47px;
    background-position:0 -75px;
    background-size:100% 282px; /* the sprite height */
}

.sub-heading:before, .sub-heading:after { content:" "; position:absolute; top:0; }
.sub-heading:before { left:-31px; width:31px; height:57px; }
.sub-heading:after { right:-12px; width:12px; height:42px; background-position:-150px 0; }

.sub-heading-txt {
    display:block;
    -webkit-transform:rotate(-2deg); -ms-transform:rotate(-2deg); transform:rotate(-2deg);
}

/* variations */
.container { margin-bottom:10px; }
.container:nth-child(3n+2) .sub-heading { background-position:0 -150px; }
.container:nth-child(3n+2) .sub-heading:before { background-position:-50px 0; }
.container:nth-child(3n+2) .sub-heading:after { background-position:-175px 0; }
.container:nth-child(3n+3) .sub-heading { background-position:0 -225px; }
.container:nth-child(3n+3) .sub-heading:before { background-position:-100px 0; }
.container:nth-child(3n+3) .sub-heading:after { background-position:-200px 0; }

Работает на IE9 +

К сожалению, свойство background-size не поддерживает значение "inherit", поэтому фактическая высота спрайта должна быть установлена ​​в css:-( Я все еще ищу более эффективное решение.

Ответ 2

С помощью комбинации форм CSS, позиционирования, :before и :after мне удалось сделать контейнер расширяемым для любого контента. Однако этот подход работает только в современных браузерах, и кажется, что нет правильного решения без js. Кроме того, использование svg в этом случае может быть очень полезным, но опять же вы ограничены совместимостью с браузером.

Вот демон с использованием чистого CSS: http://jsfiddle.net/qaWKX/

ИЗМЕНИТЬ

Использование svg оказалось бесполезным без дополнительной функции JS. Поэтому я отказался от этого подхода. Однако единственное правильное решение зависит от CSS3, но без использования селекторов :before и :after. Мой предыдущий подход основывался на создании псевдоэлементов, которые скрывают обе стороны заголовка h3. Скрытия недостаточно, если для фона нет сплошного цвета.

С этой логикой мне понадобилось background, которое объединит прозрачность и сплошную заливку. Ответ был сделан на CSS3 linear-gradient background.

Подробнее:  1. Я повернул заголовок h3  2. Я замаскировал верхнюю область контейнером (top:-value или margin-top:-value)  3. Я установил 2 linear-gradient фоновых изображений с каждой стороны

Здесь демо: http://jsfiddle.net/P5gLE/1/

Ответ 3

вот html:

<br>
<div class="scewed-shape">
    <div class="text-align">here is a very long text adsadsad</div>
</div>
<br>
<br>
<div class="scewed-shape">
    <div class="text-align">this one is shorter</div>
</div>

и вот css, который создает пользовательскую форму:

.scewed-shape {
    display:inline-block;
    -webkit-transform: perspective(500px) rotateY(34deg);
    -ms-transform: perspective(500px) rotateY(34deg);
    left: -25px;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
.scewed-shape .text-align {
    position: relative;
    top: -25px;
}

Ответ 4

Я не думаю, что это возможно только с помощью h2. Проблема возникает с разными углами перекошенных сторон, то есть вам нужен "контейнер" для перекоса и трансформации.

Учитывая ваш пример, я придумал следующее:

http://jsfiddle.net/Cbx2q/1/

Как вы увидите, у этого есть несколько проблем обслуживания:

• "Магические числа" - они нуждаются в настройке, зависящей от выбранного вами размера перекоса +.
• Отрисовка шрифта с преобразованием несколько хуже.

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

Ответ 5

Как насчет использования форм CSS? Я не работал с ними на тонну, но, похоже, это хорошее место для начала.

http://css-tricks.com/examples/ShapesOfCSS/

Ответ 6

Одним из простых решений, о которых я могу думать, является использование трех элементов (я бы использовал divs) для трех разных нижних углов формы, причем левая и правая имеют фиксированный размер, а средний - просто масштабируется с текстом ( заголовок), содержащиеся в нем. Возможно, это не самое элегантное решение, но это определенно сработает. Недостатком является то, что вам нужно много изображений, особенно если вы хотите иметь разные цветные фигуры. (Я не знаю, как цветное фоновое изображение).

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

Кроме того, если вы действительно не хотите больше элементов, чем вам нужно, вы всегда можете использовать: after и: before selectors для подделки.

Ответ 7

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Вышеприведенный код сделает IE 5.5-8 выполненным, как современный совместимый браузер, в том, что касается стиля/функциональности на странице. Этот script специально предназначен для устранения ошибок CSS/рендеринга в прошлых версиях IE.

Вот документация на script: http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Это своего рода "IE Fallback", но лучший способ подойти к проблеме. Вместо того, чтобы создавать тонну версий контента для точного отображения с использованием разных браузеров, это просто вынуждает современную совместимость к ранним версиям IE.

Я использовал этот script в прошлом, чтобы исправить аналогичные ошибки рендеринга CSS. Этот конкретный script выше должен обновить IE5.5-8 до 9. Если вы намеренно хотите обновить IE5.5-7 до 8 (не знаю, зачем вам нужно, но если вы этого желаете), дополнительные сценарии по указанному ниже URL могут сделать это.

Здесь находится страница Google и документы в ней (включая ссылку выше на этой странице) http://code.google.com/p/ie7-js/