div{position:relative;鑳屾櫙鑹诧細姗欒壊锛泒div锛氫箣鍓嶏紝div锛氫箣鍚巤鍐呭锛?'锛涗綅缃細缁濆锛涜儗鏅壊锛氱户鎵匡紱}div,div:before,div:after{瀹藉害锛?0em;楂樺害锛?0em锛沚order-top-right-radius:30%;}div{transform:rotate(-60deg)skewX(-30deg)scale(1,.866);}div:before{transform:rotate(-135deg)skewX(-45deg)scale(1.414,.707)translate(0,-50%);}div:after{transform:rotate(135deg)skewY(-45deg)scale(.707,1.414)translate(50%);}寰楀埌涓€涓渾瑙掍笁瑙掑舰锛佹晥鏋滃涓嬶細瀹屾暣浠ｇ爜鍙互鐐硅繖閲岋細CodePenDemo--甯﹀渾瑙掔殑涓夎褰㈡柟娉曚笁銆佸浘褰㈡嫾鎺ュ疄鐜版笎鍙樿壊鍦嗚涓夎褰㈠畬鎴愪簡鍚楋紵涓嶏紒涓婇潰鐨勮В鍐虫柟妗堣櫧鐒朵笉鏄お澶嶆潅锛屼絾鏈変竴鐐瑰苟涓嶅畬缇庯紝灏辨槸涓嶈兘鏀寔娓愬彉鑹茬殑鍦嗚涓夎褰€傚儚杩欐牱锛氬鏋滈渶瑕佸疄鐜颁竴涓笎鍙樼殑鍦嗚涓夎褰紝杩樻槸鏈夌偣澶嶆潅銆備絾浠嶆湁浜哄鍏惰繘琛屼簡淇ˉ銆備笅闈㈢殑鏂规硶鍙傝€?-濡備綍鍦–SS涓埗浣滀笁瑙掑渾瑙掍笁瑙掑舰銆備篃鏄娇鐢ㄥ涓潡杩涜鎷兼帴锛屼絾鏄繖娆℃垜浠殑鍩虹鍥惧舰浼氬緢澶嶆潅銆傞鍏堟垜浠瀹炵幇杩欐牱涓€涓鍣ㄦ锛屽拰涓婇潰鐨勬柟娉曠被浼硷紝鍙互鐞嗚В涓轰竴涓渾瑙掕彵褰紙鐢诲嚭杈规鏂逛究鐞嗚В锛夛細div{width:200px;楂樺害锛?00px锛涘彉鎹細鏃嬭浆锛?0搴︼級skewY锛?0搴︼級scaleX锛?.866锛夛紱杈规锛?px瀹炲績#000锛沚order-radius:20%;}鎺ヤ笅鏉ユ垜浠悓鏍蜂娇鐢ㄤ袱涓吉鍏冪礌鏉ュ疄鐜颁袱涓暐鏄炬€紓鐨勫浘褰titching鏄痶ransform鍚勭鐢ㄦ硶鐨勯泦鍚堬細div::before,div::after{content:"";浣嶇疆锛氱粷瀵癸紱瀹藉害锛?00px锛沨eight:200px;}div::before{border-radius:20%20%20%55%;鍙樻崲锛歴caleX(1.155)skewY(-30deg)rotate(-30deg)translateY(-42.3%)skewX(30deg)scaleY(0.866)translateX(-24%)锛涜儗鏅細绾㈣壊锛泒div::after{杈圭晫鍗婂緞锛?0%20%55%20%锛涜儗鏅細钃濊壊锛泃ransform:scaleX(1.155)skewY(-30deg)rotate(-30deg)translateY(-42.3%)skewX(-30deg)scaleY(0.866)translateX(24%);}涓轰簡鏂逛究鐞嗚В锛屽仛浜嗕竴涓畝鍗曠殑鍙樻崲鍔ㄧ敾:鏈川灏辨槸瀹炵幇杩欐牱涓€涓浘褰細鏈€鍚庡湪鐖跺厓绱犱笂鍔犱竴涓猳verflow:hidden骞跺幓鎺夌埗鍏冪礌鐨刡order寰楀埌涓€涓猂oundedtriangle:鐢变簬杩欎袱涓厓绱犻噸鍙犵┖闂寸殑鐗规畩缁撴瀯锛屽湪杩欎竴娆★紝涓轰袱涓吉鍏冪礌娣诲姞鐩稿悓鐨勬笎鍙橀鑹诧紝瀹冧滑灏嗗畬缇庨噸鍙狅細div::before,div::after,{background:linear-gradient(#0f0,#03a9f4);}鏈€鍚庡緱鍒颁竴涓笎鍙樼殑鍦嗚涓夎褰細涓婇潰鍥惧舰鐨勫畬鏁翠唬鐮佸彲浠ョ偣鍑昏繖閲岋細CodePenDemo--涓€涓甫鏈夊渾瑙掑拰娓愬彉鑳屾櫙鐨勪笁瑙掑舰鏈€鍚庯紝鏈枃浠嬬粛鍑犵瀹炵幇鍦嗚涓夎褰㈢殑鏂规硶CSS涓殑閮ㄥ垎鏂规硶铏界劧鏈変簺绻佺悙锛屼絾涔熶綋鐜颁簡CSS鈥滄湁瓒ｅ張鎶樼（浜衡€濈殑涓€闈€傚埌鍏蜂綋搴旂敤鐨勬椂鍊欙紝杩樻槸瑕佽€冭檻瑕佷笉瑕佺敤涓婇潰鐨勬柟娉曘€傛湁鏃讹紝鍓垏鍥剧墖鍙兘浼氭洿濂姐€傛柟妗堝噯澶囧ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>