30

我正在尝试使用 css 创建一个背景，其中一侧是纯色，另一侧是纹理：两者被对角线分割。我希望这是 2 个单独的 div，因为我计划使用 jQuery 添加一些动作，如果单击右侧，灰色三角形会变小，如果单击左侧，纹理三角形会变小（如窗帘效果）。任何建议将不胜感激。

背景被对角线分割

4

7 回答 7

45

我认为使用带有硬过渡的背景渐变是一个非常干净的解决方案：

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
于 2016-09-20T09:41:53.430 回答
19

以下是实际示例：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>

于 2013-02-06T21:43:08.313 回答
19

对于这类事情，您可以使用伪选择器，例如CSS 中的:before或:after，以尽量减少不必要的 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如何获取目标元素上的点击坐标

于 2014-07-03T18:04:17.900 回答
2

此方法在不同大小的窗口上使用文字并填满屏幕。甚至可以在手机上工作。

<!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>
于 2020-01-29T22:21:53.237 回答
1

这是一个完全响应的解决方案。请注意第二个停止点的 50.3%，这避免了@timlg07 上述评论中提到的线条像素化

.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>

于 2021-08-17T06:25:36.420 回答
0

方法一：

<div class="triangle"></div>

body {
  margin: 0;
}

.triangle {
  background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
  height: 100vh;
}

https://codepen.io/x-x00102/pen/ZEyEJyM

方法二：

<div class="triangle"></div>

body {
  margin: 0;
}

div {
  width: 100vw;
  height: 100vh;
}

.triangle::after {
  content: '';
  position: absolute;
  border-top: 100vh solid LightGray;
  border-right: 100vw solid Salmon;
}

https://codepen.io/x-x00102/pen/VwWwWGR

于 2021-08-23T22:04:39.013 回答
0

这是在一个部分的末尾添加一个对角线三角形的解决方案，它要求两个部分中的一个具有纯色 BG，但允许另一个是渐变或图像。

下面的演示显示了它的主要部分具有渐变，下面的部分是纯色（在本例中为白色）。

/* Cruft for the demo */

body {
  margin: 0;
  padding: 0;
}

.gray-block {
  background-image: linear-gradient(to bottom right, #000, #ccc);
  color: #fff;
}

.gray-block__inner {
  padding: 20px;
}

/* The actual solution */

.diagonal-end::after {
  content: "";
  display: block;
  margin-top: -6vw; /* optionally move the diagonal line up half of its height */
  border-top: 12vw solid transparent; /* change 12vw to desired angle */
  border-bottom: 0px solid transparent;
  border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
  <div class="gray-block__inner">
    <span>Some content</span>
  </div>
</div>

于 2021-09-13T16:10:23.217 回答