星空网 > 软件开发 > 网页设计

CSS 实用技巧:制作三角形

实现如图所示的三角形图标:

CSS 实用技巧:制作三角形

html代码如下:

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

css样式:

body{background:#faf7ef;}div{margin:20px auto}div.arrow-up { width:0px; height:0px; border-left:50px solid transparent;  border-right:50px solid transparent;  border-bottom:50px solid #ff0000;  font-size:0px; line-height:0px;} div.arrow-down { width:0px; height:0px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:50px solid #0000ff; font-size:0px; line-height:0px;} div.arrow-left { width:0px; height:0px; border-bottom:50px solid transparent;  border-top:50px solid transparent;  border-right:50px solid #008000;  font-size:0px; line-height:0px;} div.arrow-right { width:0px; height:0px; border-bottom:50px solid transparent;  border-top:50px solid transparent;  border-left:50px solid #ffff00;  font-size:0px; line-height:0px;}

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

 




原标题:CSS 实用技巧:制作三角形

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

SHOPLINE携手易点天下,KreadoAI开启高能营销之旅!:https://www.kjdsnews.com/a/1545685.html
了解墨西哥RFC申报流程,看如何免墨西哥20%税金!:https://www.kjdsnews.com/a/1545686.html
谁在使用AI主播卖货?:https://www.kjdsnews.com/a/1545687.html
Facebook企业户-广告投放账户不花钱不展示的解决方案:https://www.kjdsnews.com/a/1545688.html
抖音“啃老”博主涨粉解析:https://www.kjdsnews.com/a/1545689.html
倒计时4天,Shoptop在宁波与你不见不散!:https://www.kjdsnews.com/a/1545690.html
TikTok斥资210万美元游说美国参议院阻止法案通过 :https://www.goluckyvip.com/news/188220.html
北京飞机票查询(快速查询北京至各地机票价格和航班信息):https://www.vstour.cn/a/366178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流