Search the Community

В общем, после очередного совокупления с этими зубчиками, я психанул и в свободные выходные написал генератор зубчиков из градиентов. Все сделано откровенно на коленке, но задачу свою выполняет. Возможно кому-то еще пригодится. Если кто еще не понял о чем речь, то суть сводится к получению вот такой штуки на градиентах: На github выкладывать, смысла особого не вижу, так что живет оно в моем паблике на jsfiddle. Ссылка на jsfiddle: http://jsfiddle.net/alexriz/nfaxengc/ Не много комментариев: .app-tooth { background-image: linear-gradient(rgba(51,70,135,1), rgba(51,70,135,1)), /* background */ linear-gradient(-45deg, rgba(51,70,135,1) 50%, rgba(51,70,135,0) 50%), /* top */ linear-gradient(45deg, rgba(51,70,135,1) 50%, rgba(51,70,135,0) 50%), /* top */ linear-gradient(-45deg, rgba(51,70,135,0) 50%, rgba(51,70,135,1) 50%), /* bottom*/ linear-gradient(45deg, rgba(51,70,135,0) 50%, rgba(51,70,135,1) 50%), /* bottom */ linear-gradient(45deg, rgba(51,70,135,1) 50%, rgba(51,70,135,0) 50%), /* right */ linear-gradient(-45deg, rgba(51,70,135, 0) 50%, rgba(51,70,135,1) 50%), /* right */ linear-gradient(45deg, rgba(51,70,135,0) 50%, rgba(51,70,135,1) 50%), /* left */ linear-gradient(-45deg, rgba(51,70,135, 1) 50%, rgba(51,70,135,0) 50%); /* left */ background-repeat: repeat, /* background */ repeat-x, repeat-x, /* top */ repeat-x, repeat-x, /* bottom*/ repeat-y, repeat-y, /* right */ repeat-y, repeat-y; /* left */ background-position: 0 0, /* background */ -6px 0, 6px 0, /* top */ -6px 100%, 6px 100%, /* bottom*/ 100% -6px, 100% 6px, /* right */ 0 -6px, 0 6px; /* left */ background-size: auto auto, /* background */ 12px 12px, 12px 12px, /* top */ 12px 12px, 12px 12px, /* bottom*/ 12px 12px, 12px 12px, /* right */ 12px 12px, 12px 12px; background-origin: padding-box, /* background */ border-box, border-box, /* top */ border-box, border-box, /* bottom*/ border-box, border-box, /* right */ border-box, border-box; /* left */ background-clip: padding-box, /* background */ border-box, border-box, /* top */ border-box, border-box, /* bottom*/ border-box, border-box, /* right */ border-box, border-box; /* left */ border: 6px solid rgba(0,0,0,0);}Все четыре стороны получаются не очень красиво, но по две противоположные можно использовать, тем более чаще всего именно такие, парные, комбинации и встречаются.