一个很好的三角形图标效果 css

最新推荐文章于 2024-04-30 21:44:36 发布

邢管家

最新推荐文章于 2024-04-30 21:44:36 发布

阅读量466

点赞数

分类专栏：前端网页文章标签： css html

本文链接：https://blog.youkuaiyun.com/xsxlff1314/article/details/78291453

版权

前端网页专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用CSS边框属性创建三角形图标的方法，通过调整不同方向的边框宽度和颜色，可以轻松实现各种角度和大小的三角形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*{ margin: 0; padding:0 ;}
.main{ width:800px;height: 150px;position: relative;margin: 30px auto;}
.box{ width: 100px; height: 100px;margin-left:20px; float: left;}
.one1{width: 0; height: 0;
/*border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;*/
border-style: solid;
border-width: 20px;
border-color: transparent transparent #f60 transparent !important;}
.one2{width: 0; height: 0; border-style: solid;border-width: 20px;
border-color:#f60 transparent transparent transparent !important;}
.one3{width: 0; height: 0; border-style: solid;border-width: 20px;
border-color: transparent #f60 transparent transparent !important;}
.one4{width: 0; height: 0; border-style: solid;border-width: 20px;
border-color: transparent transparent transparent #f60 !important;}