使用css通过对角线分割的双色调背景

Question

我试图用css创建一个背景,其中一边是纯色,另一边是纹理:两个被对角线分开.我希望这是两个独立的div,因为我打算用jQuery添加一些动作,如果你点击右边,灰色三角形会变小,如果你点击左边,纹理三角形变小(就像一个幕布效果).任何建议将不胜感激.

Answer 1

我认为使用具有硬转换的背景渐变是一个非常干净的解决方案:

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

Answer 2

对于这类事情,您可以使用伪选择器(如CSS :before或:afterCSS)来最小化不必要的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

资源:

使用jQuery选择和操作CSS伪元素,例如:: before和:: after

使用jQuery如何获取目标元素上的点击坐标

Answer 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>