使用 css 按对角线分割的双色调背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14739162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Two-tone background split by diagonal line using css
提问by MG1
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.
我正在尝试使用 css 创建一个背景，其中一侧是纯色，另一侧是纹理：两者被对角线分开。我希望这是 2 个独立的 div，因为我计划用 jQuery 添加一些运动，如果你点击右边，灰色三角形会变小，如果你点击左边，纹理三角形会变小（就像窗帘效果）。任何建议将不胜感激。
采纳答案by gotohales
Here are the examples in action: http://jsbin.com/iqemot/1/edit
以下是实际示例：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.
您可以使用边框像素更改对角线的位置。但是，使用这种方法，您必须将内容放置在背景设置上。
#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>回答by Tom Brinkkemper
I think using a background gradient with a hard transition is a very clean solution:
我认为使用带有硬过渡的背景渐变是一个非常干净的解决方案：
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
回答by Harvey
For this sort of thing you could use pseudo selectors such as :beforeor :afterin your CSS to minimize on unnecessary HTML markup.
对于这类事情，您可以使用伪选择器（例如:before或:after在您的 CSS 中）来最小化不必要的 HTML 标记。
HTML:
HTML：
<div id="container"></div>
CSS:
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);
}
I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.
然后，我尝试使每个部分都可以根据您单击的位置展开。不幸的是，这需要一些额外的 jQuery，因为您的点击位置（相对于框）需要计算出来。
A class is then added to the box which changes the :beforepseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.
然后将一个类添加到更改:before伪对象的框中。使用类的好处是 CSS 动画比 jQuery 动画更适合浏览器。
Resources:
资源：
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
使用 jQuery 选择和操作 CSS 伪元素，例如 ::before 和 ::after
Using jQuery how to get click coordinates on the target element
回答by moe_b
This method words on different sized windows and fills the screen. Even works on mobile.
此方法在不同大小的窗口上显示并填满屏幕。甚至可以在手机上使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal</title>
<style>
*{
margin: 0;
padding: 0;
}
.diagonalimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
}
</style>
</head>
<body>
<div class="diagonalimg">
</div>
</body>
</html>
