時間:2023-09-16 19:36:01 | 來源:網(wǎng)站運(yùn)營
時間:2023-09-16 19:36:01 來源:網(wǎng)站運(yùn)營
CSS三角以及京東三角案例:按照HTML+CSS的學(xué)習(xí)順序筆記已經(jīng)更新了25篇內(nèi)容了,因?yàn)槠鶈栴},請看文末。今天來學(xué)CSS三角以及案例。div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS 三角制作</title> <style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; } .box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; } .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 為了照顧兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: pink; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="jd"> <span></span> </div></body></html>
關(guān)鍵詞:三角
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。