如何从角落到角落创建对角线渐变？

我有梯度列。需要创建一个从右上角开始到左下角的渐变，但渐变的边角会被裁剪掉。它看起来很丑，而梯度的角落没有链接。我尝试过使用背景图片，但它在移动设备上工作不好。如何从角落到角落创建对角线渐变？

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

来源

2015-07-19 lifetowin

难道您不能只将重复渐变应用于行容器而不是每个容器项目？ – Bojangles

您已经使用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

来源

2015-07-19 12:55:02 Gaslan

谢谢。确切需要什么。所有屏幕无法正常工作令人伤心。如果我将相同的高度和宽度设置为列，文本将不会放在列中。 – lifetowin

一种替代的解决方案是用符号处理名

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

这样，梯度将自己适应设置角度容器尺寸，而不是将尺寸调整为渐变角度

来源

2015-07-19 19:43:38 vals

如何从角落到角落创建对角线渐变？

回答

相关问题