文章詳情頁
利用CSS3新特性創(chuàng)建透明邊框三角
瀏覽：384日期：2022-06-02 11:10:08
先來看一下效果，這在CSS3之前，完全是不可想象的，只有圖片才能做的到，但在HTML5和CSS3大行其道的今天，實現(xiàn)這種效果，那都不是事啊。
看一下實現(xiàn)的代碼：
<!DOCTYPE html><html><head><style type="text/css">/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green;}/* 下三角 */.arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid orange;}/* 右三角 */.arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid blue;}/* 左三角 */.arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid silver;}</style></head><body> <div></div> <div></div> <div></div> <div></div></body></html>相關(guān)文章：
1. CSS3使用過度動畫和緩動效果案例講解2. python利用蒙版摳圖(使用PIL.Image和cv2)輸出透明背景圖3. CSS3實現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效4. 解決Android popupWindow設(shè)置背景透明度無效的問題5. python使用tkinter實現(xiàn)透明窗體6. js+css實現(xiàn)全屏側(cè)邊欄7. js+css3實現(xiàn)炫酷時鐘8. 詳解CSS開發(fā)過程中的20個快速提升技巧9. JS+css3實現(xiàn)幻燈片輪播圖10. 解決vue scoped scss 無效的問題
排行榜
網(wǎng)公網(wǎng)安備