用CSS的border画三角形
2018-06-24 01:38:06来源：未知 阅读 ()
用border画三角形，实际上属于一种奇淫巧技。
利用的是border的一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素。
四个边框同时设置宽度时，四个边最后在元素的中心汇成一个点。
因此当我们给一个有宽高的元素设置border时，四个边框的衔接方式是以对角线形式，而不是直角拼接，如图：
所以不设置宽高，给四个边框分别设置不同的颜色时就可以得到4个不同颜色不同方向的三角形：
想得到一个三角形的时候，不能单独设置一个边框，只设置一条边框的时候，它只是一条只有宽度没有高度的线，在页面中无法显示；
因此还是要同时设置4条边框或者给两个相邻的边框设置宽度，只给其中一个边框添加颜色即可：
设置4条边：
只设置两个相邻的边：
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
