Блог

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

Я хочу иметь диагональ, которая пересекает оба раздела, вот так:

 _____
|blah|
|blah|
|blah| 
|   /| <--- First div or section
|__/_|
| /  | <--- Second div or section
|/   |
|blah|
|blah|
|blah|
|____| 
<----> fluid width
  

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

Смотрите скрипку здесь: http://dabblet.com/gist/50db5e6220b5ba557b9e

Для справки, код вышеупомянутой скрипки является:

 /*
* Diagonal that crosses both divs without breaking
*/
div, p{margin:0;}
div{padding:0 1em;}
.one{
    background: #f06;
    background: linear-gradient(170deg, #f06 80%, yellow 80%, yellow);
    font-size: 200%
}
.two{
    background: yellow;
    background: linear-gradient(170deg, #f06 20%, yellow 20%, yellow);
    font-size: 200%
}
  

И html:

 <div class="one"><!-- foo --></div>
<div class="two"><!-- bar --></div>
  

Я пытался изменить размер фона, положение фона, происхождение фона, единицы измерения с em на px, px на%, цвет останавливается и т.д. У меня закончились идеи.

Мой вопрос в том … есть ли способ сделать угол в градиенте зависимым от ширины контейнера (каким-либо косвенным образом), чтобы при изменении его размера диагональ меняла свой угол? Я хотел бы чисто CSS-решение (без JavaScript).

Если это проблема, не имеющая решения, все в порядке =)

Вы могли бы использовать этот обходной путь:

 <div class="wrapper">
    <div class="bg"></div>
    <div class="one"><!-- foo --></div>
    <div class="two"><!-- bar --></div>
</div>
  

 .wrapper {
    position: relative;
}
.bg {
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow);
}
  

ДЕМОНСТРАЦИЯ

Я думаю, вы можете сделать это, используя background-size и no-repeat. ДЕМОНСТРАЦИЯ

 .one{
    background: #f06;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow) right  #f06 ; 
    background-size: 50% 100%;  100% 50% ;
    background-repeat:no-repeat;
    font-size: 200%
}
.two{
    background: yellow;
    background: linear-gradient(to bottom right, #f06 50%, yellow 50%, yellow) left yellow ; 
    background-size: 50% 100%;  100% 50% ;
    background-repeat:no-repeat;
    font-size: 200%
}
  

НО это будет выглядеть забавно, если оба div будут иметь разную высоту: DEMO

По моему собственному мнению, вам лучше установить градиент внутри родительского контейнера (body для вашего dabblet), если вы не хотите, чтобы угол градиента нарушался.