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%);

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

Answer 2

您使用了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

如何从一个角到另一个角创建对角线渐变？

2 个答案: