一、介紹網(wǎng)頁中常見一些三角形,使用 CSS 直接畫出來就可以,不必做成圖片或者字體圖標(biāo)。" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > CSS三角以及京東三角案例

CSS三角以及京東三角案例

時間: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三角以及案例。

一、介紹

網(wǎng)頁中常見一些三角形,使用 CSS 直接畫出來就可以,不必做成圖片或者字體圖標(biāo)。

一張圖, 你就知道 CSS 三角是怎么來的了, 做法如下:

div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }
  1. 我們用css 邊框可以模擬三角效果
  2. 寬度高度為0
  3. 我們4個邊框都要寫, 只保留需要的邊框顏色,其余的不能省略,都改為 transparent 透明就好了
  4. 為了照顧兼容性 低版本的瀏覽器,加上 font-size: 0; line-height: 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>

三、往期合集

  1. 前端HTML第一天:什么是網(wǎng)頁?什么是HTML?網(wǎng)頁怎么形成?
  2. HTML標(biāo)簽大全
  3. 前端學(xué)習(xí):表格學(xué)習(xí),附練習(xí)+源碼
  4. 前端學(xué)習(xí)之列表,附送全套源碼
  5. CSS入門最全筆記
  6. CSS樣式表
  7. CSS之emmet語法
  8. CSS的復(fù)合選擇器
  9. CSS的顯示模式
  10. CSS背景:顏色、圖片、平鋪、背景圖片位置、背景圖像
  11. CSS三大特性:疊層性、繼承性、優(yōu)先級
  12. 前端學(xué)習(xí)之CSS盒子模型以及PS基礎(chǔ)
  13. CSS之圓角邊框、盒子陰影、文字陰影
  14. CSS之浮動知識點(diǎn)匯總
  15. CSS前端基礎(chǔ)了解PS切圖
  16. CSS屬性書寫順序(重點(diǎn))
  17. CSS練手之學(xué)成在線頁面制作
  18. CSS定位的4種分類
  19. CSS綜合案例:學(xué)成在線模塊添加
  20. HTML+CSS之定位(position)的應(yīng)用
  21. HTML+CSS案例:淘寶輪播圖
  22. CSS之元素的顯示與隱藏
  23. HTML+CSS綜合案例:土豆網(wǎng)鼠標(biāo)經(jīng)過顯示遮罩
  24. 【重點(diǎn)】CSS之精靈圖
  25. CSS字體圖標(biāo)

關(guān)鍵詞:三角

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉