首页 / CSS / 通过CSS的border绘制三角形
通过CSS的border绘制三角形
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了通过CSS的border绘制三角形，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1286字，纯文字阅读大概需要2分钟。
内容图文
通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。
先写出公共的样式：
1 .border { 2 width: 0; 3 height: 0; 4 5 border-color: transparent; 6 border-width: 1rem; 7 border-style: solid; 8 }
在上面的css基础上，添加下面的组合代码，将可以控制三角形的方向：
1 border-left-color: #000;
1 border-right-color: #000;
1 border-top-color: #000;
1 border-bottom-color: #000;
1 border-left-color: #000; 2 border-bottom-color: #000;
1 border-right-color: #000; 2 border-bottom-color: #000;
1 border-right-color: #000; 2 border-top-color: #000;
1 border-left-color: #000; 2 border-top-color: #000;
1 border-top-color: #000; 2 border-bottom-color: #000;
1 border-left-color: #000; 2 border-right-color: #000;
1 border-top-color: #000; 2 border-left-color: #000; 3 border-bottom-color: #000;
1 border-top-color: #000; 2 border-left-color: #000; 3 border-right-color: #000;
1 border-bottom-color: #000; 2 border-left-color: #000; 3 border-right-color: #000;
1 border-top-color: #000; 2 border-right-color: #000; 3 border-bottom-color: #000;
还有下面的这个效果，
1 border-left-color: #000; 2 border-right-color: #000; 3 border-left-width: 3rem;
不同的组合产生不同的效果，大家可以尝试各种组合带来的效果。
内容总结
以上是互联网集市为您收集整理的通过CSS的border绘制三角形全部内容，希望文章能够帮你解决通过CSS的border绘制三角形所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】