带有渐变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;
}

我的问题是如何将背景 gradient 添加到这些 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>

---

IE 9 支持

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

Answer 2

您可以在一个 div 中完成所有操作，只需在语句中添加一个 after。

例子：

.triangle_topleft {
  width: 160px;
  height: 160px;
  position: absolute;
  top: 10%;
  left: 0%;
  clip: rect(auto, 180px, auto, 100px);
  transform: rotate(-135deg);
}
.triangle_topleft::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #70879e), color-stop(100%, #3f4c6b));
  transform: rotate(-45deg);
}
.triangle_topright {
  width: 160px;
  height: 160px;
  position: absolute;
  top: 10%;
  left: 10%;
  clip: rect(auto, 180px, auto, 100px);
  transform: rotate(-45deg);
}
.triangle_topright::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #70879e), color-stop(100%, #3f4c6b));
  transform: rotate(-45deg);
}

<div class="triangle_topleft"></div>

<div class="triangle_topright"></div>