形状与渐变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;
}

我的问题是如何为这两个三角形添加背景渐变

谢谢。

Answer 1

您将很难创建三角形的方式来创建跨浏览器解决方案。

相反，一种可能性（如果你有一个纯色背景）将是我的答案在这里适应：

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