鍦ㄤ竴浜涢潰绛鹃潰璇曚腑锛岀粡甯稿彲浠ュ湪涓€浜涢潰璇曢涓湅鍒板浣曠敤CSS鐢讳笁瑙掑舰锛岃€屽父瑙佺殑绛旀閫氬父鏄彧浣跨敤杈规銆傜敾涓€涓柟娉曘€侰SS鍙戝睍鍒颁粖澶╋紝鍙敤CSS缁樺埗涓夎褰㈠叾瀹炴湁寰堝鏈夎叮鐨勬柟娉曘€傛湰鏂囧皢璇︾粏鍒楀嚭瀹冧滑銆傞€氳繃杩欑瘒鏂囩珷锛屼綘鍙互瀛﹀埌6绉嶇敤CSS缁樺埗涓夎褰㈢殑鏂规硶锛岃€屼笖閮介潪甯稿鏄撴帉鎻°€傚綋鐒讹紝鏈枃鍙槸浠嬬粛銆侰SS鏃ユ柊鏈堝紓銆傛湰鏂囧彲鑳界己灏戜竴浜涙湁瓒ｇ殑鏂规硶銆傛杩庡ぇ瀹跺湪鐣欒█鍖鸿ˉ鍏厏浣跨敤杈规缁樺埗涓夎褰娇鐢ㄨ竟妗嗗疄鐜颁笁瑙掑舰搴旇鏄ぇ閮ㄥ垎浜洪兘鎺屾彙鐨勶紝涔熸槸鍦ㄥ悇绉嶉潰瀵归潰涓粡甯稿嚭鐜扮殑锛岄珮瀹戒负闆剁殑瀹瑰櫒骞朵娇鐢ㄩ€忔槑杈规銆傜畝鍗曚唬鐮佸涓嬶細div{border-top:50pxsolidyellowgreen;border-bottom:50pxsoliddeeppink;border-left:50pxsolidbisque;border-right:50pxsolidchocolate;}楂樺害鍜屽搴︿负0鐨勫鍣紝璁剧疆涓嶅悓棰滆壊鐨刡order锛氳繖鏍凤紝璁╀换鎰忎笁杈圭殑border棰滆壊閫忔槑锛屽氨寰堝鏄撳緱鍒板悇绉嶈搴︾殑涓夎褰細CodePenDemo-浣跨敤border瀹炵幇涓夎褰娇鐢╨inear-gradient缁樺埗涓夎褰㈡帴涓嬫潵鎴戜滑浣跨敤linear-gradient鏉ュ疄鐜颁笁瑙掑舰銆傚畠鐨勫師鐞嗕篃寰堢畝鍗曪紝鎴戜滑瀹炵幇涓€涓?5掳鐨勬笎鍙橈細div{width:100px;楂樺害锛?00px锛沚ackground:linear-gradient(45deg,deeppink,yellowgreen);}璁╁畠鐨勯鑹蹭粠娓愬彉鍙樻垚涓や釜Fixedcolor:div{width:100px;楂樺害锛?00px锛沚ackground:linear-gradient(45deg,deeppink,deeppink50%,yellowgreen50%,yellowgreen100%);}鐒跺悗浣垮叾涓竴绉嶉鑹查€忔槑锛歞iv{background:linear-gradient(45deg,deeppink,deeppink50%,transparent50%,transparent100%);}閫氳繃鏃嬭浆rotate鎴栬€卻cale锛屾垜浠篃鍙互寰楀埌鍚勭瑙掑害鍜屽ぇ灏忕殑涓夎褰€傚畬鏁寸殑demo鍙互鐐瑰嚮杩欓噷锛欳odePenDemo-浣跨敤绾挎€ф笎鍙樺疄鐜颁笁瑙掑舰浣跨敤conic-gradient缁樺埗涓夎褰㈡垨鑰呮笎鍙樸€備笂闈㈡垜浠娇鐢ㄧ嚎鎬ф笎鍙樻潵瀹炵幇涓夎褰€傛湁瓒ｇ殑鏄紝鍦╣radient瀹舵棌涓紝conic-gradient涔熷彲浠ョ敤鏉ュ疄鐜颁笁瑙掑舰銆傛柟娉曟槸鍙互璁剧疆瑙掑害姊害鐨勪腑蹇冪偣锛岀被浼肩殑涔熷彲浠ヨ缃緞鍚戞搴︾殑涓績鐐广€傛垜浠妸瑙掑害娓愬彉鐨勪腑蹇冪偣璁剧疆鍦?0%0锛屼篃灏辨槸centertop锛屽鍣ㄩ《閮ㄧ殑涓棿锛岀劧鍚庤繘琛岃搴︽笎鍙橈紝娓愬彉鍦ㄤ竴瀹氱殑瑙掑害鑼冨洿鍐咃紝閮芥槸涓夎褰㈡暟瀛椼€傚亣璁炬垜浠湁涓€涓珮瀹戒负200pxx100px鐨勫鍣紝灏嗗叾瑙掑害娓愬彉鍦嗙殑鍦嗗績璁剧疆涓?0%0:锛屽苟璁剧疆涓轰粠90掳寮€濮嬬粯鍒惰搴︽笎鍙樺浘锛岀ず鎰忓浘濡備笅锛氬彲浠ョ湅鍒颁竴寮€濮嬶紝瑙掑害娓愬彉鍦ㄥ埌杈剧浜屾潯杈逛箣鍓嶏紝娓愬彉鍥惧舰閮芥槸涓夎褰€傛垜浠彲浠ラ€氳繃閫夋嫨鍚堥€傜殑瑙掑害杞绘澗寰楀埌涓€涓笁瑙掑舰锛歞iv{background:conic-gradient(from90degat50%0,deeppink0,deeppink45deg,transparent45.1deg);}deeppink45deg棰濆鐨?.1deg,transparent45.1deg涓婇潰浠ｇ爜涓氨鏄畝鍗曠殑娑堥櫎浜嗘搴︿骇鐢熺殑璧版牱鐨勫奖鍝嶏紝杩欐牱鎴戜滑灏卞彲浠ュ緢瀹规槗鐨勯€氳繃conic-gradient寰楀埌涓€涓笁瑙掑舰銆傚悓鐞嗭紝閫氳繃鏃嬭浆鎴栫缉鏀撅紝鎴戜滑涔熷彲浠ュ緱鍒板悇绉嶈搴﹀拰澶у皬鐨勪笁瑙掑舰銆傚畬鏁寸殑demo鍙互鐐瑰嚮杩欓噷锛欳odePenDemo-浣跨敤angulargradient瀹炵幇涓夎褰ransform:rotatewithoverflow:hidden缁樺埗涓夎褰㈡柟娉曟瘮杈冨父瑙勶紝浣跨敤transform:rotatewithoverflow:hidden銆備竴鐩簡鐒讹紝涓€瀛﹀氨浼氥€傜畝鍗曠殑鍔ㄧ敾绀烘剰鍥惧涓嬶細鍦ㄥ乏涓嬭璁剧疆鍥惧舰鐨勬棆杞腑蹇冧负宸︿笅瑙掞紝鐢╫verflow:hidden鏃嬭浆銆傚畬鏁翠唬鐮侊細.triangle{width:141px;楂樺害锛?00px锛涗綅缃細鐩稿锛涙孩鍑猴細闅愯棌锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘彸锛?锛涘簳閮細0锛涜儗鏅細娣辩矇鑹诧紱鍙樻崲鍘熺偣锛氬乏涓嬭锛涘彉鎹細鏃嬭浆锛?5搴︼級锛泒}CodePenDemo-transform:rotatewithoverflow:hidden瀹炵幇涓夎褰娇鐢╟lip-path缁樺埗涓夎褰lip-path鏄竴涓緢鏈夋剰鎬濈殑CSS灞炴€с€俢lip-pathCSS灞炴€у垱寤轰竴涓鍓尯鍩燂紝鍏朵腑浠呮樉绀哄厓绱犵殑涓€閮ㄥ垎銆傚尯鍩熷唴鐨勯儴鍒嗘樉绀猴紝鍖哄煙澶栫殑閮ㄥ垎闅愯棌銆傚壀杈戝尯鍩熺敱浠庡祵鍏ュ紡URL鎴栧閮⊿VG寮曠敤鐨勮矾寰勫畾涔夈€傛崲鍙ヨ瘽璇达紝浣跨敤clip-path灏嗗鍣ㄥ壀鍒囧埌鎴戜滑鎯宠鐨勪换浣曚綅缃€傞€氳繃3涓潗鏍囩偣锛屽疄鐜颁竴涓杈瑰舰锛屽浣欑殑绌洪棿浼氳鍓帀銆備唬鐮佷篃寰堢畝鍗曪細div{background:deeppink;clip-path:polygon(00,100%0,0100%,00);}CodePenDemo-浣跨敤clip-path瀹炵幇涓夎褰㈡湰绔?-CSSclip-pathmaker锛屽彲浠ュ揩閫熷垱寤虹畝鍗曠殑clip-璺緞鍥惧舰骞跺緱鍒扮浉搴旂殑CSS浠ｇ爜銆傜敤瀛楃鐢讳笁瑙掑舰OK锛屾渶鍚庝竴涓湁鐐圭嫭鐗圭殑锛屽氨鏄敤瀛楃鏉ヨ〃绀轰笁瑙掑舰銆備笅闈㈠垪鍑轰簡涓€浜涗笁瑙掑舰瀛楃鐨勫崄杩涘埗Unicode琛ㄧず銆傗梽:鈼勨柡:鈻衡柤:鈻尖柌:鈻测娍:鈯库柍:鈻虫瘮濡傛垜浠敤鈻兼潵瀹炵幇涓€涓笁瑙掑舰鈻硷紝浠ｇ爜濡備笅锛?divclass="normal">鈻?/div>div{瀛椾綋澶у皬锛?00px锛沜olor:deeppink;}鏁堟灉杩樻槸涓嶉敊鐨勶細浣嗘槸闇€瑕佹敞鎰忕殑鏄紝鐢ㄥ瓧绗﹁〃绀轰笁瑙掑舰涓庢寚瀹氱殑瀛椾綋寮虹浉鍏筹紝涓嶅悓瀛椾綋缁樺埗鐨勫悓涓€涓瓧绗︽槸涓嶄竴鏍风殑銆傛垜鍦℅oogleFont涓婇殢鏈洪€夋嫨浜嗗嚑绉嶄笉鍚岀殑瀛椾綋鍒嗗埆浠ｈ〃鍚屼竴涓瓧绗︺€傚緱鍒扮殑鏁堟灉濡備笅锛氬彲浠ョ湅鍒帮紝涓嶅悓鐨勫瓧浣撴湁涓嶅悓鐨勫舰鐘躲€佸ぇ灏忓拰鍩虹嚎锛屾墍浠ュ鏋滆浣跨敤瀛楃涓夎褰紝璇风‘淇濈敤鎴风殑娴忚鍣ㄥ畨瑁呬簡浣犳寚瀹氱殑瀛椾綋锛屽惁鍒欎笉瑕佷娇鐢ㄨ繖涓柟娉曘€傚畬鏁寸殑瀵规瘮Demo锛屽彲浠ョ偣鍑昏繖閲岋細CodePenDemo-浣跨敤瀛楃瀹炵幇涓夎褰㈡渶鍚庯紝鏈枃鍒版缁撴潫锛屽叧浜庝娇鐢–SS缁樺埗涓夎褰㈢殑6绉嶄笉鍚屾柟寮忥紝甯屾湜瀵逛綘鏈夋墍甯姪:)鎯宠鐨勮幏鍙栨渶鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
