CSS颜色部分沿对角线方向潜入

Question

是否可以完成对角线行程，在任何一侧都有一点偏移。我已经看到了用css线性渐变实现的这种变化，但我需要稍微不同的东西。我不知道如何用文字描述我需要的东西。我会用图片。

我尝试过使用渐变色：

.diagonal{
  background-color: #34ADFF;
  background-image: linear-gradient(to right top, whitesmoke 50%, #34ADFF 50%);
  height: 300px;
}

<div class="diagonal">
</div>

那是我走了多远。我正在考虑玩儿童div，但我还不确定。

有什么想法吗？

我不想使用图片，我只想使用CSS。

Answer 1

我可以使用以下linear gradient获得所需的结果：

linear-gradient( 6deg,  transparent 73%, rgba(50, 87, 106, 0.72) 27%);

您可以非常轻松地控制形状。

第一个参数或linear-gradient( 6deg... 控制偏斜程度 - 您也可以使用负值

每种颜色后的百分比控制分界线的位置。

如果数字不等于100%，则分频器将会模糊。

我在下面的示例中添加了图像背景和background-blend-mode:overlay;以用于演示目的。

＆＃13;

＆＃13;

body {
  text-align: center;
}

.test {
  height: 400px;
  width: 500px;
  margin: 0 auto;
  display: inline-block;
  background: url(https://unsplash.it/500/400), linear-gradient( 6deg,  transparent 73%, rgba(50, 87, 106, 0.72) 27%);
  background-blend-mode:overlay;
}

＆＃13;

<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用transform: rotate()

的非常简单的演示

  

rotateZ() CSS函数定义了一个转换，该转换使元素绕z轴移动而不会使其变形。移动量由指定的角度定义;如果为正，则运动将为顺时针，如果为负，则为逆时针。

倾斜容器的工作内容需要小心放置，并且存在一些潜在的定位问题，但是我认为这可以有效。

body {
  background: lightgray;
  margin: 0;
  height: 300vh;
}
header, footer {
  position: fixed;
  height: 20vh;
  width: 120vw;
  left: -10vw;
  overflow: hidden;
}
header {
  background: lightblue;
  top: -6vh;
}
footer {
  background: lightgreen;
  bottom: -6vh;
}
footer,
header p {
  transform: rotateZ( -3deg );
}
header,
footer p {
  transform: rotateZ( 3deg );
}

<header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>
<footer>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</footer>

Answer 3

您可以尝试为div

使用单独的linear-gradient

＆＃13;

＆＃13;

.diagonal-top {
    background-image: linear-gradient(to left top, whitesmoke 50%, #34ADFF 50%);
    height: 20px;
}
.diagonal-bottom {
    background-image: linear-gradient(to right top, #34ADFF 50%, whitesmoke 50%);
    height: 40px;
}

.header {
  height: 30px;
  background-color: #34ADFF;
}

.footer {
  height: 50px;
  background-color: #34ADFF;
}

.clearfix  {
  height: 30px;
  background-color: whitesmoke;
}

＆＃13;

<div class="header"></div>
<div class="diagonal-top"></div>
<div class="clearfix"></div>
<div class="diagonal-bottom"></div>
<div class="footer"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

好的，这就是事情。这必须保持响应并能够随着时间的推移而发展，所以我寻找更好的解决方案，这就是我found。为了简化它，这里有一个片段：

＆＃13;

＆＃13;

.se-container {
  display: block;
  width: 100%;
  overflow: hidden;
  padding-top: 100px;
}

.se-slope {
  margin: 0 -50px;
  transform-origin: left center;
}

.se-slope:nth-child(odd) {
  background: url(http://lorempixel.com/400/200/);
  background-size: cover;
  transform: rotate(5deg);
  margin-top: -200px;
  box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.4);
}

.se-slope:nth-child(even) {
  background: linear-gradient(to right, purple 0%, red 100%);
  transform: rotate(-5deg);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4) inset;
}

.se-content {
  margin: 0 auto;
}

.se-content p {
  width: 75%;
  max-width: 500px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 24px;
}

.se-slope:nth-child(odd) .se-content {
  transform: rotate(-5deg);
  padding: 130px 100px 250px 100px;
}

.se-slope:nth-child(even) .se-content {
  transform: rotate(5deg);
  padding: 150px 100px 250px 100px;
}

＆＃13;

<section class="se-container">
  <div class="se-slope">
    <article class="se-content">
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </article>
  </div>
  <div class="se-slope">
    <article class="se-content">
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </article>
  </div>
  <div class="se-slope">
    <article class="se-content">
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </article>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;