介绍。tri-up{宽度:0;高度:0;border-left: 20 px固体透明;边境:20 px固体透明;边界底部:20 px固体红;}
.tri-left{宽度:0;高度:0;border-top: 20 px固体透明;边界底部:20 px固体透明;border-left: 20 px固体红色;}
.tri-right{宽度:0;高度:0;border-top: 20 px固体透明;边界底部:20 px固体透明;边境:20 px固体红色;}
.tri-down{宽度:0;高度:0;border-left: 20 px固体透明;边境:20 px固体透明;border-top: 20 px固体红;} #{演示
保证金:100 px;;
宽度:100 px;
身高:100 px;
background - color: # fff;
位置:相对;
边界:2 px固体# 333;
}//方框的样式
#演示:之前之后,#演示:{
边界:固体透明;
内容:& # 39;& # 39;;
高度:0;
左:100%;//根据三角形的位置,可以随意更改。
位置:绝对的;
宽度:0;
}
{后#演示:
边框宽度:10 px;
border-left-color: # fff;
上图:20 px;//根据三角的位置改变
}//此处是一个白色的三角
#演示:{之前
边框宽度:12 px;
border-left-color: # 000;
上图:18 px;
}此处是一个黑色的三角//当#演示:在和#演示:之前的样式重合以后,由于值最高的大小不同,就可以得到中间是白色,但是边框的三角形。如上图。 & lt; p id=癲emo"祝辞& lt;/p> #{演示
保证金:100 px;;
宽度:100 px;
身高:100 px;
background - color: # fff;
位置:相对;
边界:2 px固体# 333;
}
#演示:之前之后,#演示:{
边界:固体透明;
内容:& # 39;& # 39;;
高度:0;
上图:100%;
位置:绝对的;
宽度:0;
}
{后#演示:
边框宽度:10 px;
border-top-color: # fff;
左:20 px;
}
#演示:{之前
边框宽度:12 px;
border-top-color: # 000;
左:18 px;
}
这篇文章将为大家详细讲解有关:后如何输出一个小三角形,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
CSS代码如下:
若要写以下的小三角,则需要用到伪类::在
CSS代码:
若要改为下图的样式:
则CSS代码如下:
关于:后如何输出一个小三角形就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
