Двухцветный фон, разделенный диагональной линией, используя css

Я пытаюсь создать фон, используя css, где одна сторона является сплошным цветом, а другая – текстурой: они разделены диагональной линией. Я хотел бы, чтобы это было 2 отдельных div, так как я планирую добавить движение с помощью jQuery, где, если вы нажмете справа, серый треугольник станет меньше, и если вы нажмете слева, то текстурированный треугольник станет меньше (например, эффект занавеса). Любые советы будут очень признательны.

Фон разделен диагональной линией

Вот примеры в действии: http://jsbin.com/iqemot/1/edit

Вы можете изменить расположение диагональной линии с пограничными пикселями. При таком подходе вам придется размещать контент по сравнению с настройками фона.

#container { height: 100px; width: 100px; overflow: hidden; background-image: url(http://sofru.miximages.com/css/site-background-pattern-07.jpg); } #triangle-topleft { width: 0; height: 0; border-top: 100px solid gray; border-right: 100px solid transparent; } 
 

Для такого рода вещей вы можете использовать псевдоселектора, такие как :before или :after в вашем CSS, чтобы минимизировать ненужную разметку HTML.

HTML:

 

CSS:

 #container { position: relative; height: 200px; width: 200px; overflow: hidden; background-color: grey; } #container:before { content: ''; position: absolute; left: 20%; width: 100%; height: 200%; background-color: rgb(255, 255, 255); /* fallback */ background-color: rgba(255, 255, 255, 0.5); top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } 

JSFiddle

Затем я попытался сделать так, чтобы каждый раздел мог расширяться в зависимости от того, где вы нажали. Для этого, к сожалению, требуется немного дополнительного jQuery, так как позиция вашего клика (относительно поля) должна быть разработана.

Затем в поле добавляется class, который изменяет :before псевдообъектом. Поверхность использования classа заключается в том, что анимация CSS оптимизирована лучше для браузера, чем для jQuery.

JSFiddle

Ресурсы:

Выбор и управление псевдоэлементами CSS, такими как :: before и :: после использования jQuery

Использование jQuery, как получить координаты кликов на целевом элементе

Я думаю, что использование фонового gradleиента с жестким переходом – очень чистое решение:

 .diagonal-split-background{ background-color: #013A6B; background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%); } 
  • Как создать «подсказку хвоста» с помощью чистого CSS?
  • Почему размер windows меньше ширины видового экрана, заданного в медиа-запросах
  • css3 переход анимации при загрузке?
  • CSS: Как сказать. Class: last-of-type
  • Internet Explorer 10 - как применить оттенки серого фильтра?
  • Наполнение анимации воды
  • WebKit: размытый текст с масштабом css + translate3d
  • Как создать импульсный эффект с использованием -webkit-animation - наружные кольца
  • Границы gradleиента CSS3
  • Каковы правила совпадения запросов медиа-запросов CSS?
  • Как создать многоцветную границу в css3
  • Давайте будем гением компьютера.