矩形的透明角的渐变？

时间：2016-01-13 10:05:16

标签： css css3 linear-gradients 

linear-gradient(to bottom left, blue, rgba(255,255,255,0));

我们如何为右下角，左上角，右上角创建3个其他渐变？我查看了Mozilla的文档，但没有任何内容。

它与我尝试将角落设置为透明颜色而不是实心颜色并不相同。

4 个答案:

答案 0 :(得分：2)

使用线性渐变（纯CSS）：

创建渐变以使角落透明的一种方法是将容器分成4个部分。每个部分将是父母的高度和宽度的50％，并将容纳4个渐变中的一个。通过给予他们适当的background-position，我们可以获得所需的效果。

div {
  background: linear-gradient(to top left, yellow, transparent 75%), linear-gradient(to bottom left, yellow, transparent 75%), linear-gradient(to top right, yellow, transparent 75%), linear-gradient(to bottom right, yellow, transparent 75%);
  background-size: 50% 50%;
  background-position: 0px 0%, 0px 100%, 100% 0%, 100% 100%;
  background-repeat: no-repeat;
  width: 20%;
  height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

注意：正如评论中所讨论的那样，浏览器似乎在中间留下了一个小间隙（白线）。当计算的元素像素宽度为奇数（即20%等于奇数）时，似乎会发生此问题。例如，假设计算的宽度为125px。在X轴的background-size时间变为62px（50%的{​​{1}}向下舍入到最接近的整数）。由于这种向下舍入，梯度的一半的大小只有62px，这在梯度之间引入了1px的间隙（这只是白线）。

对固定宽度容器使用纯CSS方法更安全，因为我们可以直接给出125px像素。

纯CSS解决方法：

使用纯CSS的一种可能的解决方法是将background-size设置为从左侧开始1px。下面代码段中的第二个background-position似乎显示正常，它也是响应式的。 缺点是中间会有一个小的重叠。根据您的需要，这种重叠可能是也可能不合适。

div
div {
  background: linear-gradient(to top left, yellow, transparent 75%), linear-gradient(to bottom left, yellow, transparent 75%), linear-gradient(to top right, yellow, transparent 75%), linear-gradient(to bottom right, yellow, transparent 75%);
  background-size: 50% 50%;
  background-position: 0px 0%, 0px 100%, 100% 0%, 100% 100%;
  background-repeat: no-repeat;
  width:20%;
  height:60px;
}
div:nth-of-type(2) {
  background: linear-gradient(to top left, yellow, transparent 75%), linear-gradient(to bottom left, yellow, transparent 75%), linear-gradient(to top right, yellow, transparent 75%), linear-gradient(to bottom right, yellow, transparent 75%);
  background-size: 50% 50%;
  background-position: 1px 0%, 1px 100%, 100% 0%, 100% 100%; /* position is altered */
  background-repeat: no-repeat;
  width:20%;
  height:60px;
}

div:hover{
  width: 50%;
  height: 200px;
}

使用一些JavaScript解决方法：

如果使用一点JavaScript不是问题，那么可以轻松解决此问题。唯一应该做的是设置容器元素的<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div></div> <br/> <div></div>，使其始终为偶数。这意味着计算出的width不会向下舍入，因此两者之间不会有间隙。 background-size应设置width，onload以及可能导致宽度更改的任何其他事件（例如onresize）。

hover
window.onload = function() {
  var width = document.querySelector('div:nth-of-type(1)').parentElement.clientWidth;
  var childWidth = Math.round(width / 5);
  childWidth = (childWidth % 2 == 1) ? childWidth - 1 : childWidth;
  document.querySelector('div:nth-of-type(1)').style.width = childWidth + 'px';
}
div {
  background: linear-gradient(to top left, yellow, transparent 75%), linear-gradient(to bottom left, yellow, transparent 75%), linear-gradient(to top right, yellow, transparent 75%), linear-gradient(to bottom right, yellow, transparent 75%);
  background-size: 50% 50%;
  background-position: 0px 0%, 0px 100%, 100% 0%, 100% 100%;
  background-repeat: no-repeat;
  width: 20%;
  height: 60px;
}

答案 1 :(得分：0)

来自文档示例linear-gradient( 45deg, blue, red );。所以你只需要将45deg更改为所需的角度。要为单个元素提供多个渐变，只需用逗号分隔它们。

linear-gradient(), linear-gradient()

答案 2 :(得分：0)

您可以通过将背景切成9片（3 x 3）来解决：中心一个，边缘四个，角落四个。中心的将得到一个单一的颜色渐变，边缘的渐变将是线性的，而角落的渐变将是径向的，像这样

每个切片将获得不同的background-image，background-size和background-position，它们都具有background-repeat: no-repeat; 

.gradient {
  -webkit-animation: shrink-grow 4s infinite alternate ease-in-out;
          animation: shrink-grow 4s infinite alternate ease-in-out;
  width: 350px;
  height: 200px;
  background-image: 
    /* center */
    linear-gradient(to bottom, red 0%, red 100%), 
    /* top */
    linear-gradient(to top, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* right */
    linear-gradient(to right, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* bottom */
    linear-gradient(to bottom, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* left */
    linear-gradient(to left, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* top left */
    radial-gradient(ellipse farthest-side at 100% 100%, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* top right */
    radial-gradient(ellipse farthest-side at 0 100%, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* bottom right */
    radial-gradient(ellipse farthest-side at 0 0, red 70%, red, orange, yellow, green, blue, purple, transparent), 
    /* bottom left */
    radial-gradient(ellipse farthest-side at 100% 0, red 70%, red, orange, yellow, green, blue, purple, transparent);
  background-position: 
    /* center */
    50px 50px, 
    /* top */
    50px 0, 
    /* right */
    100% 50px, 
    /* bottom */
    50px 100%, 
    /* left */
    0 50px,
    /* top left */
    0 0, 
    /* top right */
    100% 0,
    /* bottom right */
    100% 100%, 
    /* bottom left */
    0 100%;
  background-size:
    /* center */
    calc(100% - 2 * 50px) calc(100% - 2 * 50px), 
    /* top */
    calc(100% - 2 * 50px) 50px, 
    /* right */
    50px calc(100% - 2 * 50px), 
    /* bottom */
    calc(100% - 2 * 50px) 50px, 
    /* left */
    50px calc(100% - 2 * 50px), 
    /* top left */
    50px 50px, 
    /* top right */
    50px 50px, 
    /* bottom right */
    50px 50px, 
    /* bottom left */
    50px 50px;
  background-repeat: no-repeat;
}

@-webkit-keyframes shrink-grow {
  0%, 100% {
    width: 350px;
    height: 200px;
  }
  25% {
    width: 450px;
    height: 200px;
  }
  50% {
    width: 450px;
    height: 100px;
  }
  75% {
    width: 350px;
    height: 100px;
  }
}

@keyframes shrink-grow {
  0%, 100% {
    width: 350px;
    height: 200px;
  }
  25% {
    width: 450px;
    height: 200px;
  }
  50% {
    width: 450px;
    height: 100px;
  }
  75% {
    width: 350px;
    height: 100px;
  }
}
<div class="gradient"></div>

我做了一个SCSS mixin，您可以看到in action here 

@mixin rectangular-gradient($center-color, $gradient, $edge: 1em) {

  background-image:
    linear-gradient(to bottom, #{$center-color} 0%, #{$center-color} 100%),
    linear-gradient(to top, #{$gradient}),
    linear-gradient(to right, #{$gradient}),
    linear-gradient(to bottom, #{$gradient}),
    linear-gradient(to left, #{$gradient}),
    radial-gradient(ellipse farthest-side at 100% 100%, #{$gradient}),
    radial-gradient(ellipse farthest-side at 0 100%, #{$gradient}),
    radial-gradient(ellipse farthest-side at 0 0, #{$gradient}),
    radial-gradient(ellipse farthest-side at 100% 0, #{$gradient}),
  ;
  background-position:
    $edge $edge,
    $edge 0,
    100% $edge,
    $edge 100%,
    0 $edge,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    ;
  background-size: 
    calc(100% - 2 * #{$edge}) calc(100% - 2 * #{$edge}),
    calc(100% - 2 * #{$edge}) $edge,
    $edge calc(100% - 2 * #{$edge}),
    calc(100% - 2 * #{$edge}) $edge,
    $edge calc(100% - 2 * #{$edge}),
    $edge $edge,
    $edge $edge,
    $edge $edge,
    $edge $edge,
  ;
  background-repeat: no-repeat;
}

答案 3 :(得分：0)

Harry的answer中存在奇数像素计数问题的解决方法：使用calc

将一半像素添加到位置和大小 

div {
  background: 
    linear-gradient(to top left, red, transparent 75%), 
    linear-gradient(to bottom left, red, transparent 75%), 
    linear-gradient(to top right, red, transparent 75%), 
    linear-gradient(to bottom right, red, transparent 75%);
  background-size: calc(50% + 0.5px) calc(50% + .5px);
  background-position: 
    0px 0%, 
    0px calc(100% + .5px), 
    calc(100% + .5px) 0%, 
    calc(100% + .5px) calc(100% + .5px);
  background-repeat: no-repeat;
  width: 20%;
  height: 60px;
  
  animation: shrink-grow 10s infinite  linear;
}

@keyframes shrink-grow {
  0%, 100% {
    width: 200px;
  }
  50% {
    width: 300px;
    height: 100px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

相关问题
最新问题