1. width为0或者height为0
#a{
margin: 150px auto;
height: 100px;
width: 0;
border-top: 50px solid red ;
border-bottom: 50px solid yellow ;
border-right: 50px solid gray;
border-left: 50px solid aqua;
}
#b{
margin: 150px auto;
width: 100px;
height: 0;
border-top: 15px solid red ;
border-bottom: 15px solid yellow ;
border-right: 35px solid gray;
border-left: 35px solid aqua;
}
效果:
一切尽在图中
2.小箭头
#a{
margin: 150px auto;
width: 0;
height: 0;
border: 100px solid #999;
border-left-color: transparent;
border-right-color: transparent;
border-bottom: none;
transition: .3s;
}
#a:hover{
transform: rotate(180deg);
}
#b{
margin: 150px auto;
width: 100px;
height: 100px;
border-top: 2px solid #999;
border-right: 2px solid #999;
transform: rotate(135deg);
transition: .3s;
}
#b:hover{
transform: rotate(-45deg);
}
效果:
2.1 注意点:
2.1.1 实心三角
出于让三角围绕自身中心旋转我们要保证3个border(共4个剩下的一个为none)中的两个border为了隐藏颜色需设为transparent(我们也可以用1中的方法构造小三角)。
让我们来看看下面的图!
由于border-bottom为none(border的默认值为none)所以高度为零,底下全部没有(图中的是我补上去的)!然后此时transform-origin(默认值为center)为border-top的中心即三角的中心。所以我们在设置border-left和border-right的颜色为transparent就行了
2.1.2 空心三角
构造思想是取一个正方形边框的左边和右边然后使其旋转向下
很遗憾,我没发现可以使空心三角绕自身中心旋转的方法,如果有小伙伴发现了,或知道,恳请给我留言。