.btn{margin:8pxauto;浼哥缉鏀剁缉锛?锛涘搴︼細160px锛涢珮搴︼細64px锛泒.rect{鑳屾櫙锛?f6ed8d;}.circle{杈规鍗婂緞锛?4px;background:#7de3c8;}姊舰鍜屽钩琛屽洓杈瑰舰鎺ヤ笅鏉ユ牴鎹煩褰㈢殑鍙樺舰锛岀粡甯镐細鍑虹幇姊舰鍜屽钩琛屽洓杈瑰舰鎸夐挳銆傚疄鐜板畠浠富瑕佸彲浠ヤ娇鐢╰ransform锛屼絾鏄渶瑕佹敞鎰忕殑鏄娇鐢╰ransform涔嬪悗锛宭abel涓殑鏂囧瓧涔熶細鍙樺舰锛屾墍浠ユ垜浠€氬父浣跨敤鍏冪礌鐨勪吉鍏冪礌鏉ュ疄鐜板舰鐘讹紝杩欐牱浼氫笉褰卞搷鎸夐挳涓殑鏂囨湰銆傚崟璇嶃€傚彧闇€瀵瑰钩琛屽洓杈瑰舰浣跨敤transform:skewX()銆傛敞鎰忎笂闈紝浣跨敤鍏冪礌鐨勪吉鍏冪礌瀹炵幇骞宠鍥涜竟褰紝浠ュ厤褰卞搷鍐呴儴鏂囧瓧銆?divclass='btnparallelogram'>骞宠鍥涜竟褰?/div>.parallelogram{position:relative;瀹藉害锛?60px锛涢珮搴︼細64px锛?::涔嬪墠{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘簳閮細0锛涘彸锛?锛涜儗鏅細#03f463锛涘彉鎹細skewX锛?5deg锛夛紱}}濡傛灉涓嶆兂鐢ㄤ吉鍏冪礌锛岄櫎浜唗ransform:skewX()锛屽骞宠鍥涜竟褰娇鐢ㄦ笎鍙樹篃鏄彲浠ョ殑銆傚ぇ姒傛槸杩欐牱锛歿background:linear-gradient(45deg,transparent22%,#04e6fb22%,#9006fb78%,transparent0);}姊舰姊舰姣斿钩琛屽洓杈瑰舰澶嶆潅涓€鐐癸紝鏇村鐨勬槸鐢ㄩ€忚锛屽叾瀹烇紝瀹冧娇鐢ㄦ煇绉?D鍙樻崲杩涜銆傚師鐞嗘槸缁昘杞存棆杞殑鐭╁舰锛屽儚杩欐牱锛氫娇鐢ㄩ€忚鍜屽彉鎹細rotateX()锛屽綋鐒朵篃鍙互鍐欐垚锛?divclass='btntrapezoid'>Trapezoid