一、实现原理
在css3中，我们主要使用的是一个transparent的属性，意思是透明的，比如我们将字体设置为黑色会写color：black，那么如果想把字体的颜色设置为透明，我们可以写color：transparent。同理background-color：transparent可以设置背景为透明。
二、 8种三角形实现实例
triangle up 上三角形
#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}
triangle down 下三角形
#triangle-down{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid black;}
triangle left 左三角形
#triangle-left{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:100px solid black;}
triangle right 右三角形
#triangle-right{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid black;}
triangle top left 左上三角形
#triangle-topleft{
width:0;
height:0;
border-top:100px solid black;
border-right:100px solid transparent;}
triangle top right 右上三角形
#triangle-topright{
width:0;
height:0;
border-top:100px solid black;
border-left:100px solid transparent;}
triangle bottom left 左下三角形
#triangle-bottomleft{
width:0;
height:0;
border-bottom:100px solid black;
border-right:100px solid transparent;}
triangle bottom right 右下三角形
#triangle-bottomright{
width:0;
height:0;
border-bottom:100px solid black;
border-left:100px solid transparent;}
相关文章
精彩导读
热门资讯
联系博主