使用CSS制作小三角形边框，原理与实现
时间：2023-03-28 10:45:34
HTML
鍓嶈█锛氳繖涔熸槸鎴戞渶杩戞墠鍙戠幇鐨勪竴涓粏鑺傦紝灏辨槸缁忓父鍦ㄤ竴浜涚綉绔欎笂鐪嬪埌鍍忎笅鍥捐繖鏍风殑灏忎笁瑙掑舰銆傛垜浠ュ墠瀛︾殑CSS涓嶅銆傛垜涓€鐩磋涓鸿繖鏄竴涓簿鐏佃〃鎴栧叾浠栦笢瑗裤€傪煒傛渶杩戞墠寮€濮嬭鐪熷涔犲墠绔紝姣旀槬灏忕櫧鎳傜殑澶氫竴鐐广€傛枃涓鏈変笉瓒充箣澶勶紝璇峰強鏃舵寚鍑猴紝鍦ㄦ琛ㄧず琛峰績鐨勬劅璋€?.CSS涓夎褰㈢殑鏂规硶涓嬮潰绠€鍗曡涓€涓嬪浣曠粯鍒朵笁瑙掑舰锛岀煡閬撲簡鐢ㄤ粈涔堟潵缁樺埗涔嬪悗锛屽氨鍩烘湰缁撴潫浜嗐€侶tml浠ｇ爜锛?divclass="sanjiao">
css浠ｇ爜锛?sanjiao{/*浣垮叾灞呬腑浠ヨ幏寰楃編瑙傗€嬧€?margin:0auto;/*楂樺害鍜屽搴﹀繀椤绘寚瀹氫负闆?/width:0;楂樺害锛?锛?*涓烘墍鏈夊洓涓竟璁剧疆杈规鍜岄鑹?/border-bottom:10pxsolid#FFD5A1;border-top:10pxsolid#00A1D6;border-left:10pxsolidsaddlebrown;border-right:10pxsolidseagreen;}鍏堢湅鐪嬩唬鐮佹晥鏋滐紝鍐嶈鍏朵粬鍝堥〉闈€傛樉绀烘晥鏋滄槸鐢卞洓涓皬涓夎褰㈢粍鎴愮殑姝ｆ柟褰€傚師鐞嗘槸浠€涔堬紵鐩掑瓙姣忎竴杈圭殑杈规閮芥槸姊舰鐨勩€傚綋鐩掑瓙鐨勫昂瀵镐负0鏃讹紝姊舰鐨勪笂搴曪紙杈规鐨勫唴渚э級涔熶负0锛屾墍浠ヤ袱鏉¤竟浼氬悎骞舵垚涓€涓笁瑙掑舰銆傜ず鎰忓浘澶ц嚧濡備笅锛氬綋涓棿鐨勭洅瀛愬楂橀兘涓?鏃讹紝灏卞彉鎴愪簡涓€涓銆?銆佷簡瑙ｄ簡CSS浜笢鐨勫簲鐢ㄥ師鐞嗕箣鍚庯紝鎴戜滑鏉ュ仛涓€涓皬妗堜緥銆侶TML浠ｇ爜锛?divclass="main">
