通过border来实现各种三角符号
生活随笔
收集整理的這篇文章主要介紹了
通过border来实现各种三角符号
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很長時間沒有動筆了，最近學的東西很雜很亂！又有點丟了西瓜撿芝麻，走馬觀花，瞻前顧后的感覺！
因此，我決定一步步來，化繁為簡，今天就從border入手。
很多時候我們都會需要一個三角形或者三角小箭頭。我們可以用border來做。當然還有其他很多中方法，比如直接圖片，canvas等。
直接上代碼吧！
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{padding:0;margin:0;}body{padding:100px;}.a0,.a1{display:inline-block;width:0;height:0;border-width:20px;border-style:solid;border-color:red blue black wheat;}.a0{width:40px;height:40px;}p{text-align:center;margin:20px;}.a2,.a2-2{display:inline-block;width:0;height:0;border-width:0 50px 50px 0;border-style:dashed solid solid dashed;border-color:red blue transparent wheat;}.a2-2{margin-left:100px;border-width:50px 50px 0px 50px;border-style:dashed solid solid dashed;border-color:red blue transparent wheat;}.a3,.a3-1{display:inline-block;width:0;height:0;border-width:50px;border-style:dashed dashed solid;border-color:transparent transparent rgb(252,146,176) !important; /*rgba(252,146,176,.2)*/-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.a3-1{display:inline-block;width:0;height:0;margin-left:100px;border-width:50px;border-style:dashed dashed solid;border-color:rgba(252,146,176,.2) rgba(252,146,176,.2) rgb(252,146,176) !important; /*rgba(252,146,176,.2)*/-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}.a3 i,.a3-1 i{display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);font-style:normal;margin-top:18px;margin-left:-5px;font-size:28px;color:white;}</style> </head> <body><span class="a0"></span><span class="a1"></span><p><span class="a2"></span><span class="a2-2"></span></p><p style="padding:20px;"><span class="a3"><i>X</i></span><span class="a3-1"><i>X</i></span></p> </body> </html>
?
轉載于:https://www.cnblogs.com/hl-520/p/5672702.html
總結
以上是生活随笔為你收集整理的通过border来实现各种三角符号的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RTF文件结构分析及其应用
- 下一篇： android一键锁屏代码