现在网页上会有好多地方插入一些三角形,大图标,小图标等,往往好多程序猿写的时候都直接是引入图片,但这样势必会影响加载速度。现在小编告诉你一种直接代码就可以写出来的三角形,只需要html和css的指示就可以的哦。
1第一种方法
也就是大家众所周知的直接插入图片,可以使背景图片也可以是直接<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="sanjiaoxing.jpg"/>,在这里本人就不详述了.
2第二种方法
三角形边框只是利用了一个元素的边框,元素本身宽高都为0,把边框颜色设置为透明色,然后需要的一边设置为自己想要的颜色即可。这样说你可能还不太懂,那么好吧,直接上干货。代码如下:
最终实现效果如下:
个人公众微信号:机灵猴工作室
點(diǎn)擊查看更多內(nèi)容
20人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦