如何使用css编写三角形:
/* css3三角形(向上 ▲) /
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; / 右透明 /
border-right:5px solid transparent; /右透明 /
border-bottom:5px solid #2f2f2f; / 定义底部颜色 /
font-size:0px;
line-height:0px;
}
/ css3三角形(向下 ▼) /
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
/ css3三角形(向左) /
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; / left arrow slant /
border-top:5px solid transparent; / right arrow slant /
border-right:5px solid #2f2f2f; / bottom, add background color here /
font-size:0px;
line-height:0px;
}
/ css3三角形(向右) /
div.arrow-rightright {
width:0px;
height:0px;
border-bottom:5px solid transparent; / left arrow slant /
border-top:5px solid transparent; / right arrow slant /
border-left:5px solid #2f2f2f; / bottom, add background color here */
font-size:0px;
line-height:0px;
}
css 如何写排序三角形箭头
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 做前端的小伙伴经常会在项目中遇到需要实现三角形或者带三角形对话框的地方,很多的实现方法是将三角形小图标给切成图片,...
- 这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上。它可以帮你很好地整理你的元素并让他们看起来蛮酷的...