如何创建从角到角的对角渐变？

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

另一种解决方案是使用符号名称设置角度

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

这样，渐变将根据容器尺寸自行调整，而不是根据渐变角度调整尺寸