本文详细介绍了如何使用纯CSS绘制不同方向的三角形，包括向上、向下、向左及向右的箭头形状。通过简单的边框颜色设置，实现美观且实用的网页装饰元素。
.tri-up{
width: 0;
height:0;
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red; }
.tri-left{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;}
.tri-right{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid red;}
.tri-down{
width: 0;
height:0;
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
}
width: 0;
height:0;
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red; }
.tri-left{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;}
.tri-right{
width: 0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid red;}
.tri-down{
width: 0;
height:0;
border-left:20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
}
扫一扫
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
