首页 / CSS / CSS实现三角效果

CSS实现三角效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS实现三角效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含850字，纯文字阅读大概需要2分钟。

内容图文

方法一：使用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;
}

效果：

CSS实现三角效果 - 文章图片

利用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;
}

效果：

CSS实现三角效果 - 文章图片

应用场景：点击234或者点击选中的时候三角形指向对应的选项

CSS实现三角效果 - 文章图片

小贴士：

1、学会经常使用伪元素例如after或者before来实现三角形

2、两种方法的区别：第二种方法设置的三角形背景色和边框的颜色相同；第一种方法设置的三角形背景色和边框的颜色可以不相同；需要根据不同应用场景效果来选择方法。

第二种方法也可以通过使用两个颜色不同的三角形覆盖来实现背景色和边框色不同的效果。

内容总结

以上是互联网集市为您收集整理的CSS实现三角效果全部内容，希望文章能够帮你解决CSS实现三角效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/394941.html

来源：【匿名】