双色背景由对角线使用CSS分割 [英] Two-tone background split by diagonal line using css

问题描述

我试图使用css创建一个背景，其中一边是纯色，另一边是纹理：两个用对角线分割。我想这是2个独立的div，因为我计划添加一些运动与jQuery，如果你点击右边，灰色三角形变小，如果你点击左边纹理三角形变得更小（像窗帘效果）。

I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.

推荐答案

您可以从这样开始：

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

和

#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;
}

以下是操作中的示例：http://jsbin.com/iqemot/1/edit

Here are the examples in action: http://jsbin.com/iqemot/1/edit

您可以更改对角线与边界像素。使用这种方法，您必须将内容放置在后台设置上。

You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.

这篇关于双色背景由对角线使用CSS分割的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！