文章詳情頁
利用CSS3新特性創建透明邊框三角
瀏覽：549日期：2022-06-02 11:10:08
先來看一下效果，這在CSS3之前，完全是不可想象的，只有圖片才能做的到，但在HTML5和CSS3大行其道的今天，實現這種效果，那都不是事啊。
看一下實現的代碼：
<!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>相關文章：
排行榜
網公網安備