對角線傾斜的CSS顏色部分

Question

是否可以實現對角線筆畫，在任何一邊都有一些偏移。我已經看到用css線性漸變完成這個變化，但我需要稍微不同的東西。我不知道如何用文字描述我需要的東西。我會用圖片。

我試着玩梯度：

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

<div class="diagonal"> 
 
</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;。

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>

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

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

Answer 4

好了，所以這裏的東西。這必須保持響應和隨着時間的推移而發展，所以我尋找更好的解決方案，這就是我的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>