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

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

Ответ 1

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

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

#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-right: 100px solid transparent;
}

<div id="container">
  <div id="triangle-topleft"></div>
</div>

Ответ 2

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

HTML:

<div id="container"></div>

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, так как позиция вашего клика (относительно поля) должна быть разработана.

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

JSFiddle

Ресурсы:

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

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

Ответ 3

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

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}