方法一：使用border来设置边框，元素有高度和宽度
.triangle { transform: rotate(45deg); display: block; width: 12px; height: 12px; border: 1px solid #9e9e9e; border-top-color: transparent; border-right-color: transparent; background-color: #fff; }
效果：
利用transform属性可以旋转三角形，达到想要的效果。
立即学习“前端免费学习笔记（深入）”；
方法二：利用border来撑起来三角形
.triangle { display: block; position: absolute; width: 0; border-width: 6px; border-color: transparent transparent red; border-style: dashed dashed solid; top: -12px; right: 76px; }
效果：
立即学习“前端免费学习笔记（深入）”；
应用场景：点击234或者点击选中的时候三角形指向对应的选项
立即学习“前端免费学习笔记（深入）”；
小贴士：
1、学会经常使用伪元素例如after或者before来实现三角形
2、两种方法的区别：第二种方法设置的三角形背景色和边框的颜色相同；第一种方法设置的三角形背景色和边框的颜色可以不相同；需要根据不同应用场景效果来选择方法。
第二种方法也可以通过使用两个颜色不同的三角形覆盖来实现背景色和边框色不同的效果。
以上这篇CSS实现三角效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多CSS实现三角效果的实例详解相关文章请关注PHP中文网！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1607623.html
微信扫一扫 
支付宝扫一扫 
