文章詳情頁(yè)
利用CSS3新特性創(chuàng)建透明邊框三角
瀏覽：563日期：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. 詳解CSS偽元素的妙用單標(biāo)簽之美2. 網(wǎng)頁(yè)中img圖片使用css實(shí)現(xiàn)等比例自動(dòng)縮放不變形（代碼已測(cè)試）3. 詳解盒子端CSS動(dòng)畫(huà)性能提升4. 利用CSS制作3D動(dòng)畫(huà)5. css進(jìn)階學(xué)習(xí) 選擇符6. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera7. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案8. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)9. 新手學(xué)習(xí)css優(yōu)先級(jí)10. CSS代碼檢查工具stylelint的使用方法詳解
排行榜
網(wǎng)公網(wǎng)安備