梯度css3形状

Question

我有两个带有css的三角形：

三角形左上角

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

三角形右上角

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}

我的问题是如何将背景梯度添加到这些2三角形中

谢谢。

Answer 1

您将与创建三角形以创建跨浏览器解决方案的方式进行斗争。

相反，一种可能性(如果您有一个坚实的颜色背景)将是将my answer here调整为如下所示：

​

.amount {
  position: absolute;
  height: 0%;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: all 1s;
  background: tomato;
}
.tri {
  position: relative;
  height: 200px;
  width: 200px;
  background: rgb(34,34,34); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(34,34,34,1) 0%, rgba(237,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,34,34,1)), color-stop(100%,rgba(237,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#ed0000',GradientType=0 ); /* IE6-9 */

}
.tri:before,
.tri:after {
  content: "";
  position: absolute;
  border-top: 200px solid white;
  top: 0;
  z-index: 8;
}
.tri:before {
  border-left: 100px solid transparent;
  left: 50%;
}
.tri:after {
  border-right: 100px solid transparent;
  left: 0;
}

<div class="tri">
</div>

​

另一种方法是使用伪元素，如果需要，还可以使用渐变的背景颜色：

​

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow:hidden;
}
div:before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  height: 100%;
  width: 100%;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
  
  
  
  background: rgb(34,34,34); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(34,34,34,1) 0%, rgba(237,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,34,34,1)), color-stop(100%,rgba(237,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#ed0000',GradientType=0 ); /* IE6-9 */

}

<div></div>

​

IE9支援

.wrap {
  height: 300px;
  width: 300px;
  position: relative;
  overflow:hidden;
}
.tri {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  height: 100%;
  width: 100%;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
  
  
  
  background: rgb(34,34,34); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(34,34,34,1) 0%, rgba(237,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(34,34,34,1)), color-stop(100%,rgba(237,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(34,34,34,1) 0%,rgba(237,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#ed0000',GradientType=0 ); /* IE6-9 */

}

<div class="wrap"><div class="tri"></div></div>

​