文章詳情頁
利用CSS3新特性創(chuàng)建透明邊框三角
瀏覽：133日期：2022-06-02 11:10:08
先來看一下效果，這在CSS3之前，完全是不可想象的，只有圖片才能做的到，但在HTML5和CSS3大行其道的今天，實(shí)現(xiàn)這種效果，那都不是事啊。
看一下實(shí)現(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實(shí)現(xiàn)動態(tài)翻牌效果 仿百度貼吧3D翻牌一次動畫特效2. 使用css實(shí)現(xiàn)全兼容tooltip提示框3. CSS可以做的幾個令你嘆為觀止的實(shí)例分享4. 如何在CSS中繪制曲線圖形及展示動畫5. CSS linear-gradient屬性案例詳解6. 從零學(xué)CSS系列之文本屬性7. 詳細(xì)分析css float 屬性以及position:absolute 的區(qū)別8. 如何使用CSS3畫出一個叮當(dāng)貓9. 推薦一個好看Table表格的css樣式代碼詳解10. 《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計（三)
排行榜
網(wǎng)公網(wǎng)安備