如何從角落到角落創建對角線漸變？

Question

我有梯度列。需要創建一個從右上角開始到左下角的漸變，但漸變的邊角會被裁剪掉。 它看起來很醜，而梯度的角落沒有鏈接。我嘗試過使用背景圖片，但它在移動設備上工作不好。

<section class="slider"> 
    <div class="container slider-menu"> 

     <div class="col-lg-5ths col-md-5ths col-sm-5ths col-xs-4"><img src="http://rustypepper.me/production/img/icon-2.png" alt="Шарики" class="img-responsive"> 
      <p> 

      Lorem <br> Ipsum 
      </p> 
     </div> 

     // ........ 14 same columns 

    </section> 

.slider-menu div { 
    background: #006bac; 
    position: relative; 
    margin-bottom:5px; 
    height: 240px; } 

    .slider-menu div img { 
    position: relative; 
    z-index: 999; } 

.slider-menu div:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.1; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 

    background: black; 
    /* Old browsers */ 
    background: -moz-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, black), color-stop(51%, white), color-stop(51%, black), color-stop(100%, white)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%); 
    /* IE10+ */ 
    background: linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1); 
    /* IE6-9 fallback on horizontal gradient */ } 

.slider-menu img { 
    display: block; 
    margin: 0 auto; } 

.slider-menu p { 
    text-align: center; 
    color: #fff; 
    margin-top: 20px; } 

http://codepen.io/lifetowin/pen/PqByRK/

Answer 1

您已經使用45度梯度，從而高度和單元格的寬度必須相等。你的不是。所以，如果你讓寬度和高度相等，那麼它就可以。和我改變了漸變停止％51至％50

.slider-menu div { 
    background: #006bac; 
    position: relative; 
    margin-bottom:5px; 
    height: 228px; } 
    .slider-menu div img { 
    position: relative; 
    z-index: 999; } 

.slider-menu div:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.1; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+52,000000+52,ffffff+100,000000+100,ffffff+100 */ 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+51,000000+51,ffffff+100 */ 
    background: black; 
    /* Old browsers */ 
    background: -moz-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, black), color-stop(50%, white), color-stop(50%, black), color-stop(100%, white)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%); 
    /* IE10+ */ 
    background: linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1); 
    /* IE6-9 fallback on horizontal gradient */ } 



.slider-menu .row { 
    padding: 0px; } 

.slider-menu img { 
    display: block; 
    margin: 0 auto; } 

.slider-menu p { 
    text-align: center; 
    color: #fff; 
    margin-top: 20px; } 


.col-xs-5ths, 
.col-sm-5ths, 
.col-md-5ths, 
.col-lg-5ths { 
    position: relative; 
    min-height: 1px; 
    padding-right: 10px; 
    padding-left: 10px; } 

.col-xs-5ths { 
    width: 20%; 
    float: left; } 

@media (min-width: 768px) { 
    .col-sm-5ths { 
    width: 20%; 
    float: left; } } 

@media (min-width: 992px) { 
    .col-md-5ths { 
    width: 20%; 
    float: left; } } 

@media (min-width: 1200px) { 
    .col-lg-5ths { 
    width: 20%; 
    float: left; } } 

@media (min-width: 320px) { 
    .container { 
    padding: 0px 15px; } 
    .site-header .container { 
    padding: 0px; } 
    .slider-menu div { 
    padding: 50px 0px 24px 0px; } 
    .slider-menu p { 
    font-size: 12px; } 
    body { 
    margin: 0 0 65px; 
    /* bottom = footer height */ } 
    .site-footer { 
    height: 65px; 
    padding: 0px 10px; } 
    .site-footer p.pull-left { 
     display: none; } 
    .site-footer p.pull-right { 
     float: left !important; } 
    .list-image > div { 
    margin-top: 15px; } 
    .container > .navbar-collapse { 
    margin-left: 0px; 
    margin-right: 0px; } 
    .navbar-nav > li > p > a { 
    color: #fff; } 
    .navbar-nav { 
    margin: 0px auto; 
    width: 100%; } 
    .navbar-nav li { 
     width: 100%; } 
    .navbar-nav .container { 
     margin-left: 0px; 
     margin-right: 0px; } 
    .site-header .container > .navbar-header { 
    margin-left: auto; 
    margin-right: auto; } } 

http://codepen.io/anon/pen/eNjQmO

Answer 2

一種替代的解決方案是用符號處理名

background: linear-gradient(to top right, black 0%, white 51%, black 51%, white 100%); 

這樣，梯度將自己適應設置角度容器尺寸，而不是將尺寸調整爲漸變角度