文章詳情頁(yè)
利用CSS3新特性創(chuàng)建透明邊框三角
瀏覽：151日期：2022-06-02 11:10:08
先來(lái)看一下效果，這在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. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案2. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享3. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)4. 詳解盒子端CSS動(dòng)畫(huà)性能提升5. 利用CSS制作3D動(dòng)畫(huà)6. 使用css實(shí)現(xiàn)全兼容tooltip提示框7. CSS hack用法案例詳解8. 簡(jiǎn)單明了帶你了解CSS Modules9. PHP下載CSS文件中的圖片10. css代碼優(yōu)化的12個(gè)技巧
排行榜
網(wǎng)公網(wǎng)安備