虽然上面的演示在 Chrome 中看起来非常不错,但缺少任何浏览器支持信息,并且它在许多浏览器中都不起作用。我花了一些时间来开发一种更跨浏览器的方法。
这是适用于所有现代浏览器的解决方案,具有使用 Sass 的良好构建功能
.triangle {
/* sample positioning */
width: 160px;
height: 160px;
position: absolute;
top: 30%;
left: 45%;
/*
* deprecated syntax has better browser support
* IE8+
* http://css-tricks.com/almanac/properties/c/clip/
*/
clip: rect(auto, 180px, auto, 100px);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.triangle::after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
/**
* To also support IE 9 we you a background images
* as fallback, created via compass:
* @include background-image(linear-gradient(300deg, green, blue));
*/
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDkxNTA2IiB5MT0iMC44NDE1MDYiIHgyPSItMC4wOTE1MDYiIHkyPSIwLjE1ODQ5NCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -moz-linear-gradient(150deg, green, blue);
background-image: -webkit-linear-gradient(150deg, green, blue);
background-image: linear-gradient(300deg, green, blue);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
目前支持 IE 10+、Firefox、Opera、Chroma、Safari