是否可以实现对角线笔画，在任何一边都有一些偏移。我已经看到用css线性渐变完成这个变化，但我需要稍微不同的东西。我不知道如何用文字描述我需要的东西。我会用图片。对角线倾斜的CSS颜色部分

我试着玩梯度：

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

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

这是多远我已经走了。我正在考虑与孩子们一起玩，但我还不确定。

任何想法？

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

来源

2017-07-04 Andres Zapata

你尝试过CSS面具是什么？或者可能使用画布。只是一个建议。 – raju

确实，很难从这幅图像中确切地理解你真正需要什么。你的意思是这样的https://codepen.io/maxverleye/pen/ItDis？剪辑是不错的，但真的不够支持.. 也许这将帮助你：https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms – Kiwad

@Kiwad MDN说剪辑是弃用。哟发布的第一个链接可能工作。如果你看看我粘贴的代码，你可以选择从左上角到右下角的颜色。基本上我需要相同的内容，但左上角从下方开始，距离下方是原始起点。希望这是有道理的。 –

我能够使用以获得期望的结果如下linear gradient：

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

你可以很容易控制其形状。

所述第一参数或linear-gradient(6deg...控制的偏斜程度 - 可以使用负值以及

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

如果数字不加起来100%分频器将模糊。

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

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

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

来源

2017-07-04 03:17:53

确实，你haz kode @我haz kode 我认为这就是它！ –

@AndresZapata没问题，高兴帮忙 –

使用`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>

来源

2017-07-04 03:25:36

这个可以工作，谢谢！ –

不客气。凌晨4:30不太寒酸;-) –

你可以尝试使用一个单独的div为linear-gradient

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

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

来源

2017-07-04 03:26:39

嘿@Matias Cerrotta不错！我认为这也可以工作=） –

太棒了！你应该玩一点'高度' –

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

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

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

来源

2017-07-04 03:38:24 Kiwad

对角线倾斜的CSS颜色部分

回答

使用transform: rotate()

相关问题

使用`transform: rotate()`