当前位置: 首页 > Web前端 > HTML

CSS实现切角效果

时间:2023-03-28 13:52:01 HTML

娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇鎺㈠憳鍦ㄦ渶杩戠殑椤圭洰涓湅鍒拌繃杩欐牱鐨勫垏瑙掓晥鏋滐紝濡備笅鍥撅紝鏄竴涓櫘閫氱殑鐭╁舰锛岀劧鍚庤鈥滃垏鈥濅竴鍧楋紝瀹冩槸娌跨潃鍙充笂瑙掔殑Cut銆傞偅涔堬紝杩欑甯冨眬鏄浣曞伐浣滅殑鍛紵1.鑷€傚簲鏂规硶杩欑甯冨眬涓€鑸湁涓ょ鑷€傚簲鏂规硶銆傚綋鐒跺叿浣撻渶瑕佸摢涓€绉嶅彲浠ユ牴鎹璁¤€呯殑瀹為檯闇€瑕佽€屽畾銆?.鍥哄畾璺濈鏃犺瀹介珮濡備綍鍙樺寲锛屽垏瑙掍笌椤堕儴鐨勮窛绂绘槸鍥哄畾鐨勶紝濡備笅2.鍥哄畾瑙掑害鏃犺瀹介珮濡備綍鍙樺寲锛屽垏瑙掍笌椤堕儴鐨勫す瑙掍负鍥哄畾鐨勩€備笅闈㈡垜浠缁嗙湅涓€涓嬭繖涓ょ甯冨眬鐨勫疄鐜般€?.鍥哄畾璺濈鍒囪鏇村ソ瀹炵幇锛屽彧闇€瑕佷娇鐢╟lip-path鍗冲彲銆傚亣璁剧椤堕儴鐨勮窛绂绘槸20px锛岄偅涔堝洓涓偣鐨勫潗鏍囧氨鏄唬鐮佸疄鐜版槸div{clip-path:polygon(020px,100%0,100%100%,0100%);}杩欐牱a璺濈鍥哄畾瑙掑害鍒囧壊3.瑙掑害鍥哄畾瑙掑害鍒囧壊杩欎釜绋嶅井澶嶆潅涓€鐐广€備竴寮€濮嬩互涓哄彲浠ュ疄鐜颁竴涓畝鍗曠殑绾挎€ф笎鍙橈紝姣斿div{background:linear-gradient(-30deg,#B89DFF80%,transparent0);}瀹炴椂鏁堟灉鍙互鐪嬪埌濡備笅锛岃櫧鐒惰搴︽槸鍥哄畾鐨勶紝浣嗘槸鍒囪涓嶄細闈犺繎鍙充笂瑙掞紝鍥犱负绾挎€ф笎鍙樼殑璧风偣鏄部瑙掑害鍨傜洿浜庡畠鐨勬渶杩滆窛绂伙紝濡備笅鍥撅紙鎴浘鍙栬嚜MDN瀹樻柟缃戠珯锛夛紝鎵€浠ヤ笉鑳戒繚璇佸垏瑙掔殑鍥哄畾浜ょ偣浣嶇疆锛屾洿閫傚悎閭g鍒囪灏忕殑鍦烘櫙銆傝繕鏈夊埆鐨勫姙娉曞悧锛熷綋鐒讹紝涔熸湁鎻愬埌瑙掑害鐨勩€傞櫎浜嗙嚎鎬ф笎鍙橈紝杩樺彲浠ユ兂鍒癱onic-gradient锛夛紝鍙互鍦ㄦ煇涓€鐐圭敾鍑哄渾閿ュ舰鐨勫浘妗堛€傚亣璁惧浐瀹氳搴︿负20搴︼紝濡備笅鍥撅紝閿ュ舰娓愬彉鐨勮搴︿负250掳锛?70-20锛夛紝浠g爜瀹炵幇濡備笅div{background:conic-gradient(#B89DFF250deg,transparent0);}鏁堟灉濡備笅锛屽洜涓哄渾閿ユ笎鍙樼殑榛樿涓績鐐规槸瀹瑰櫒鐨勪腑闂寸偣銆傛垜浠渶瑕佺Щ鍔ㄥ埌鍙充笂瑙掞紝浣嶇疆鍙互閫氳繃at鎸囧畾锛屽涓嬶細div{background:conic-gradient(at100%0,#B89DFF250deg,transparent0);}鍥哄畾瑙掑害鍒囪4.鎬荤粨涓€涓嬩笂闈袱绉嶈繖绉嶅竷灞€鐨勫疄鐜版柟寮忥紝涓昏鏄娇鐢╟lip-path鍜宑onic-gradient锛屼笅闈㈡€荤粨涓€涓媍lip-path鍙互鏍规嵁鍧愭爣鐐瑰垏鐭╁舰锛宭inear-gradient涔熷彲浠ュ疄鐜板垏瑙掔殑鏁堟灉锛屼絾鏄畠涓嶈兘闈犺繎鍙充笂瑙掋€俢onic-gradient鍙互瀹炵幇浠绘剰瑙掑害鐨勯敟褰紝鍚屾椂鍙互鎸囧畾涓績鐐圭殑浣嶇疆銆傚綋鐒讹紝骞朵笉闄愪簬姝ゃ€傚緢澶氫笉瑙勫垯鐨勫竷灞€閮藉彲浠ュ線杩欎釜鏂瑰悜鎬濊€凁煠旀渶鍚庯紝濡傛灉瑙夊緱杩樹笉閿欙紝濡傛灉瀵逛綘鏈夊府鍔╋紝娆㈣繋鐐硅禐銆佹敹钘忋€佽浆鍙戔潳鉂も潳娆㈣繋鍏虫敞鎴戠殑鍏紬鍙凤細鍓嶇澶т睛鎺?/p>