Trong khi bản demo trên trông thật sự tốt đẹp trong Chrome, bất kỳ thông tin hỗ trợ trình duyệt đang mất tích và nó không hoạt động trong nhiều trình duyệt. Tôi đã dành chút thời gian để phát triển một phương pháp tiếp cận nhiều trình duyệt hơn.
HERE'S A SOLUTION FOR ALL MODERN BROWSERS WITH A NICE BUILD FUNCTION USING 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);
}
Hiện nay hỗ trợ IE 10+, Firefox, Opera, Chroma, Safari
Nguồn
2014-09-13 04:37:23
Hãy luôn bao gồm các mã có liên quan trong câu hỏi của bạn. Các liên kết bên ngoài rất tuyệt vời nhưng nếu chúng không tồn tại, câu hỏi của bạn sẽ vẫn hữu ích cho người khác. –