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

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

Background split by diagonal line

15
css css-transitions css3

3 ответов

вот примеры в действии: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>
15

для такого рода вещи, вы можете использовать псевдо-селекторы, такие как :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 и ::after с помощью jQuery

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

18

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

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